日期:2014-05-17  浏览次数:20804 次

【分享】你必须知道--IE中的hasLayout
在IE中,有一个很重要的概念,这个概念,对 IE 中页面元素的布局有影响。这就是 hasLayout。可能很多人都不知道它的存在吧,但是它却偷偷的做了那么多坏事。
虽然如此,MSDN 中涉及到 hasLayout 这个 MS 属性的地方寥寥无几,而具体解释 layout 和 IE 渲染模型之间关系的则少之又少。
hasLayout 就是一把双刃剑,对 IE 的布局很重要,而同时,在 IE 中引起了很多 bug,比如浮动双边距bug等。

它是很多兼容性问题的罪魁祸首。

IE专有的Layout
hasLayout的字面意思是 “拥有布局”。在说明 hasLayout 之前,需要先说明一个跟它相关的概念--”Layout”,也就是“布局”。
"Layout"是IE/Win的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。
"Layout"可以被某些CSS特性(property)不可逆的触发,而某些HTML元素本身就具有layout。
"Layout"在IE/Win中通过 hasLayout 属性来判断一个元素是否拥有layout。

hasLayout属性

hasLayout 是IE浏览器渲染引擎的一个内部组成部分。在IE浏览器中,一个元素要么自己对自身的内容进行组织和计算大小,要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了 hasLayout的属性,属性值可以为true或false。
当一个元素的 hasLayout 属性值为 true 时,我们说这个元素有一个布局(layout),或拥有布局。

从何而来

默认 hasLayout 的元素:

可触发hasLayout的CSS特性:

Internet Explorer 7 还有一些额外的属性(不完全列表)可以触发hasLayout:


另外注意,IE6以前的版本(也包括IE6及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于IE5.5),通过设置任何元素的 width/height(非auto)都可以触发hasLayout。但在IE6/IE7的标准模式中的行内元素上却不行,设置 display:inline-block才可以。

hasLayout与Block formatting contexts
在IE中,触发hasLayout的元素,与W3C标准中创建了 Block Formatting contexts存在很多相似之处,都能包含浮动元素,都会阻止margin折叠等等,后续会详细的介绍。

hasLayout会影响IE中 offsetParent 对象的判定
在 IE中,有些情况下,某个元素的offsetParent 是离他最近的hasLayout的元素。详细的见 跨浏览器开发 中的帖子:【分享】深入挖掘 offsetParant 元素的判定

触发 hasLayout 的元素的高度计算可能会有问题
空的高度为 auto 的元素,计算后的高度应该是0,但是在IE中,触发hasLayout后,高度不为0,后续会详细的介绍。

触发 hasLayout 会影响 P 等元素的浏览器默认 margin 值
……

总之,hasLayout 还引起了很多其他的问题,在此处不再一一说明。

参考文章:On having layout
参考译文:http://old9.blogsome.com/2006/04/11/onhavinglayout

更多兼容性问题:
【分享】浏览器兼容性问题目录

------解决方案--------------------
好作品当然要顶
------解决方案--------------------
说真的。我不知道。
------解决方案--------------------
好作品顶起
------解决方案--------------------
啥玩意乱糟的一点技术含量没有
------解决方案--------------------
太轼加工下苗我罡;工业区胸襟迷了轼
------解决方案--------------------
没试过 试试看看
------解决方案--------------------
呵呵,顶顶...
------解决方案--------------------
还不错,用力顶!
------解决方案--------------------
我只是路过看看而已~!
------解决方案--------------------
好网站好文章顶起来
------解决方案--------------------
没研究过,听都没听过,你真专业
------解决方案--------------------
发现了 很好
------解决方案--------------------
学到了。以前都不知道
------解决方案--------------------
好文章~~~~标记一下~~
------解决方案--------------------
以前便知道IE中有这个 但是却没楼主知道的这么详细
------解决方案--------------------
虽然看不懂。但觉得是好做平,顶!
------解决方案--------------------
路过看看~~
------解决方案--------------------