【分享】你必须知道--IE中的hasLayout

WebAdvocate 2010-08-10 04:52:45

加精

在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

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

...全文