hasLayout----------IE浏览器css bug的一大罪恶根源。
part01:什么是hasLayout？
百度百科对hasLayout解释：（微软要设hasLayout的原因：）haslayout 是IE浏览器渲染引擎的一个内部组成部分。在IE浏览器中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性。当一个元素的hasLayou = -1时，它负责对自己和可能的子孙元素进行尺寸计算和定位。【即这个元素有一个独立的布局（layout）】这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。"hasLayout" 决定了一个对象在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。
备注：hasLayout只出现在IE7及更早版本中。
以下元素默认 hasLayout= -1 （负责组织自身内容的元素将默认有一个布局）：
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>
对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。
很多情况下，我们把 hasLayout的状态改成 -1 就可以解决很大部分ie下显示的bug。但是hasLayout属性不能直接设定，我们只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。
part02:hasLayout的触发条件
-------------------------------------
display:inline-block
hasLayout是IE浏览器为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性。
【但IE本身不支持inline-block的，只是表现得像标准里说的inline-block】
test01:
<span class="span01">span01</span> <span class="span02">span02</span>
.span01{background: #f1c100;width: 100px;} .span02{background: #f1c100;width: 100px;display: inline-block;}
ie6效果：
查看两者的属性：
类为span02的触发了hasLayout。表现得跟inline-block元素的特性一样（支持高宽，垂直margin和padding等）。
--------------------------------------
width/height：任何值除了auto
【优先考虑使用width属性。height对 IE6 及更早版本来说很常用，该方法被称为Holly hack，即设定这个元素的高度为 1% (height:1%;)。】
test02:
<div class="box01">box01</div> <div class="box02">box02</div> <div class="box03">box03</div>
.box01{background: #f1c100;} .box02{background: #f05a01;width: 300px;} .box03{background: #f0dcb9;height: 1%;}
ie6效果：
属性对比：设置width属性和height:1%可以触发hasLayout
早期的一些工程师推荐使用“height:1%”来触发hasLayout，那时还没有出现IE7,而height属性在IE6下其实是按照"min-height"来解析的，所以只要对IE6进行hack,"* html{height:1%}"就可以触发hasLayout，同时又不带来副作用了。后来出现的IE7仍然存在很多hasLayout的问题，但IE7已经能够正确识别height属性了，“height:1%”的方法已经不再适用了。
于是，一个更好的解决方法开始流行，它使用了一个生僻的CSS属性zoom来触发hasLayout。使用"zoom:1"可以触发hasLayout，并且不会像height等属性一样引入副作用，更妙的是，我们可以不用CSS hack了。但"zoom:1"并不一定可以触发hasLayout的。在极少数特殊的情况下，例如非常复杂的CSS设置，特别是使用DHTML的时候，使用"zoom:1"有时候也会无效，这时，我们可能需要借助更强大的"position:relative"来帮助触发hasLayout。总之，"zoom”是最常用，最安全，成本最少的触发hasLayout的方式，一般情况下，使用它就完全可以触发hasLayout了。如果遇到特殊情况，"zoom:1"无效的情况下，我们可以通过设置"position:absolute"来触发hasLayout，尽管它会带来一点副作用。
---------------------------------------
zoom：除 normal 外任意值（zoom是IE专有属性，可以触发hasLayout但不会影响页面的显示效果。）
这里可以参考我的另一篇博客<a href="http://www.cnblogs.com/liqun/p/3410292.html" target="_blank">《zoom:1》</a>
----------------------------------------
---------------------------------------
position：absolute
float：left或right
这两个要放在一起分析，主要是因为它们是定位体系两大内容。
css有三种定位体系：1、常规流(Normal flow) 2、浮动(Floats) 3、绝对定位(Absolute positioning)
这样我们就很清楚地知道，浮动和绝对定位元素都是脱离当前的常规流。也就是说这些元素有一个独立的布局（layout）。
当然，我们可以自己测试一下：
test03：设置position:absolute;
<div class="box01">box01</div> <div class="box02">box02</div> <div class="box03">box03</div>
.box01{background: #f1c100; position: absolute;} .box02{background: green;} .box03{background: #f0dcb9;}
ie6效果：box01有一个独立的布局
属性：
test04:设置float:left
<div class="box01">box01</div> <div class="box02">box02</div> <div class="box03">box03</div>
.box01{background: #f1c100; float: left;} .box02{background: green;} .box03{background: #f0dcb9;}
ie6效果：浮动元素也触发了hasLayout
属性：
浙公网安备 33010602011771号