在IE浏览器各个版本中，有一个概念需要特别注意，就是hasLayout。hasLayout是IE浏览器专有的一个属性，用于CSS的解析引擎。它的设计初衷是用于辅助块级元素的盒模型解析。恰当的使用它可以降低浏览器的渲染压力。虽然人们不常直接提到它，但是它常常出现在我们开发的问题中。因为有时IE下一些复杂CSS的设置问题解析起来会出bug，就是因为hasLayout没有被自动触发。下面举两个例子：

1. 滤镜效果

div#box {    background:red;    filter:alpha(opacity=50);}

…
    
         text
    

在IE各个版本浏览器中运行发现，IE8可以正常显示滤镜效果，而IE6/7无法显示滤镜效果。这就是没有激活hasLayout的缘故，因为没有hasLayout的元素上滤镜不起作用。div和span默认就没有hasLayout。

激活元素的hasLayout的方法就是进行某些css设置，如：

• position：如position: relative（可能带来副作用）
• float
• width(!auto)
• height(!auto)：如height: 1%（可能带来副作用，因为在IE6下管用，在IE7下就不行了）
• zoom：如zoom: 1（最安全，又没有副作用，但极特殊的情况下可能无效，那时就要借助position: relative）
• overflow

因此上面的例子可以做如下改动：

div#box {    background:red;    filter:alpha(opacity=50);    height:19px;}

2. “不合时宜”的矩形

hasLayout元素默认显示为矩形。因此有时不小心错误地激活了hasLayout之后会出现错误的效果。

#pic {    float:left;width:50px;height:50px;}#content {    border:1px solid blue;    background:yellow;height:100%;}

    
    
     
    
     
      long text…
     
    

上面的代码在Firefox和IE8中都能正常显示为：

但是在IE6/7中的显示则是：

#content {    border:1px solid blue;    background:yellow;height:100%;}

之所以如此是因为#content中对height的设置触发了#content的hasLayout，因此它显示为矩形而不是不规则图形。解决方法就是将对height的设置写在离元素最近的wrapper样式设置上：

#pic {    float:left;width:50px;height:50px;}#content {    border:1px solid blue;}

    
    
     
    
     
      long text…
     
    

上文的内容整理自淘宝前端开发教程——《深入剖析浏览器》。

3. 利用hasLayout在IE6/7中实现display:inline-block

IE6/7支持的display类型只有block、inline和none三种。但是inline-block也是一种很有用的特性。它是行内的块级元素，可以像块级元素一样设置长宽，设置margin和padding，但它和行内元素一样，不独占一行，它的宽度不占满父元素，而是和其他行内元素一起排列在一行中。

上面提到hasLayout是为块级元素设计的，所以触发行内元素的hasLayout可以让行内元素也拥有一些块级元素的特性。设置方法如下：

span{    ...    display: inline-block;  //这句话在IE6/7中其实不起作用，只是触发hasLayout    width: 100px;           //现在可以像块元素那样给“行内元素”设置宽了    height: 30px;           //现在可以像块元素那样给“行内元素”设置高了    *vertical-align: -10px; //为了使span和块元素一样顶端对齐，而不是底部对齐}