CSS精粹：HasLayout初探
本系列内容由ZouStrong整理收录
大多数低版本IE浏览器下的样式异常，都是源于 haslayout（它是页面显示异常的根源），它决定了元素在低版本IE下的布局
一. haslayout是什么
haslayout 是低版本IE（IE6、IE7）渲染引擎（Mosaic）的一个内部组成部分（不是CSS属性），可以说haslayout是低版本浏览器独有的一种机制
haslayout在IE8及以上版本的标准模式中已经废弃了
在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，IE渲染引擎采用 了 hasLayout 的属性，属性值可以为true或false
- 当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）
- 当一个元素拥有一个布局（layout）时，它会负责本身及其后代元素的尺寸和定位（所以会花更多代价来维护自身和里面的内容）
- 当一个元素没有布局时，它尺寸和位置由最近的拥有layout的父元素控制
由于拥有布局的元素还要对别人负责，这意味着这个元素需要花更多的代价来维护自身和里面的内容，耗费性能，因此IE中只有一些有必要的元素才拥有layout（也就是haslayout被设为了true），而那些没有layout的元素就是IE下BUG的根源
默认有布局的元素（不完全列表）
html,body
table, tr, th, td
img
hr
input, button, file, select, textarea, fieldset
iframe,objects, applets, embed而其他的元素（ul、li、div、p、a等）都没有默认布局，这就经常导致BUG的出现，而解决方法就是触发该元素的haslayout，使其拥有layout，进而查看BUG是否仍然存在，如果存在，再去找寻其他解决方案
注：haslayout 为只读属性 一旦被触发，就不可逆转
二. 触发haslayout
不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。
通过设置以下 css 属性即可
float： left 或 right
position：absolute或fixed
display：inline-block或table或table-cell
width：任何值除了auto
height:：任何值除了auto
zoom：除normal外的任何值（Microsoft属性——不能通过W3C检验）
writing-mode: tb-rl（Microsoft属性——不能通过W3C检验）IE 7 还有一些额外的属性也可触发haslayout
min-height: (任意值)
max-height: (除 none 外任意值)
min-width: (任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值)大部分拥有明确宽高或者浮动的元素都不会产生BUG，因为触发了haslayout(对于内联元素(如span或 display:inline; 的元素)，会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout)
zoom:1
zoom属性总是可以触发 hasLayout，常用的方法是设定 zoom:1——这是因为大多数情况下，它能在不影响现有样式的条件下激发元素的 haslayout