在IE6,7中遇到未知的问题无法解决时可以尝试触发其layout

在 IE6、7 中遇到一些布局问题时，一种常见的解决方案是触发元素的 layout ，这种解决方案可以帮助解决许多 IE6、7 下的布局问题。本文将介绍什么是 layout 和如何触发 layout 。

什么是 Layout？

在 IE 浏览器中，layout 是元素的一个属性，用于表示元素的大小和位置信息，并对其他元素的布局产生影响。具有 layout 属性的元素称为“有布局”的元素，而没有 layout 属性的元素称为“无布局”元素。

如何触发 Layout？

1. 通过改变元素的尺寸或位置来触发 layout ，常见的方法有：

    /* IE6 */
    *width: expression(this.offsetWidth +"px");
    /* IE7 */
    *zoom:1;

1. 通过一些CSS属性来触发 layout，常见的CSS属性有：

    /* IE6 */
    *display:inline-block;
    /* IE7 */
    *display:inline;

注意：

• • 表示只对 IE 特定版本生效

• expression 属性是 IE 特有的一个写法，会在每次重绘时执行一次，但会影响性能。建议优先考虑使用 zoom 和 display 等方式触发 layout 。

通过示例详细说明

示例一：避免 IE6 中 margin-bottom 无法生效的问题

在 IE6 中，元素的 margin-bottom 属性经常无法生效，此时可以通过触发子元素的 layout 来解决问题。

    /* 有溢出元素 */
    .parent {
        height: 50px;
        overflow: hidden; 
        *zoom: 1; /* 通过zoom触发layout */
    }

    .child {
        margin-bottom: 20px;
    }

示例二：避免 IE7 中子元素设置 display: inline-block 属性时没有对父元素产生影响的问题

在 IE7 中，子元素设置 display: inline-block 属性时可能对其父元素没有任何影响，此时可以通过触发父元素的 layout 来解决问题。

    /* 有溢出元素 */
    .parent {
        display: inline-block； /* 触发layout，增加CSS声明即可 */
    }

    .child {
        display: inline-block； 
    }

总之，无论是为了解决 IE 浏览器下的兼容性问题，还是为了让代码清晰可读，都值得学习和掌握如何触发元素的 layout。