神奇的hasLayout

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

1. 滤镜效果

div#box {
    background:red;
    filter:alpha(opacity=50);
}
<!DOCTYPE html>
…
<div id=“box”>
    text
</div>

在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%;
}
<div>
    <div id=“pic”></div>
    <div id=“content”>long text…</span>
</div>

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

神奇的hasLayout_第1张图片

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

神奇的hasLayout_第2张图片

#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;
}
<div style=“background:yellow;height:100%;”>
    <div id=“pic”></div>
    <div id=“content”>long text…</span>
</div>

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

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和块元素一样顶端对齐,而不是底部对齐
}
上文的内容来自《编写高质量代码——Web前端开发修炼之道》。

你可能感兴趣的:(css,haslayout)