CSS进阶2 : 历史上的 hasLayout 概念

IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念，由于这个显示引擎自身存在很多的缺陷，直接导致了IE6-7的很多显示bug。当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout http://msdn.microsoft.com/worksh ... rties/haslayout.asp 为此被设为了 true 。IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。

触发hasLayout的条件：

• position: absolute 
   
• float: left|right 
   
• display: inline-block 
   
• width: 除 “auto” 外的任意值 
   
• height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1%  ） 
   
• zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp 
   
• writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp

在 IE7 中，overflow 也变成了一个 layout 触发器：

• overflow: hidden|scroll|auto （ 这个属性在IE之前版本中没有触发 layout 的功能。 ）
   
• overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）

hasLayout更详细的解释请参见大名鼎鼎的 《On having layout》一文（英文原文：http://www.satzansatz.de/cssd/onhavinglayout.htm）