在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 还引起了很多其他的问题,在此处不再一一说明。