ie6、ie7dom 元素重新渲染及zoom的使用

当网站需要支持IE6和IE7浏览器时，可能会出现页面布局绘制问题，这是由于IE6和IE7的渲染机制不同，就会导致DOM元素重绘的问题。为解决这一问题，可以使用zoom属性重新渲染元素。

什么是DOM元素重新渲染

DOM元素的重新渲染是指改变元素的外观属性时，需要将其重新绘制一次。当浏览器重新渲染元素时，会影响到布局和性能。IE6和IE7的浏览器默认采用的是HasLayout机制，使用zoom属性可以使元素重新渲染，达到平滑渲染的效果。在使用这种方法时，需要注意一些细节，具体内容如下。

zoom属性的作用

zoom属性是指定元素的缩放比例，它可以用来设置元素的大小和形状。在浏览器中，当zoom属性被设置为非1的值时，该元素就被赋予了HasLayout属性，从而可以重绘元素。如：

   /*设置zoom属性，以实现元素的重绘*/
   .box {
      zoom: 1;
   }

示例分析

示例一

假设有如下HTML结构：

<div class="wrapper">
  <div class="box">
    <p>这是一段文字，用来展示IE6和IE7中DOM元素的重新渲染</p>
  </div>
</div>

我们可以在CSS中这样设置：

/*让.box元素拥有haslayout属性*/
.box {
  zoom: 1;
  display: inline-block; /*一定要设置display属性，才能使元素拥有haslayout属性*/
}

在IE6和IE7中，如果没有设置.zoom属性，文字的边框会出现重叠的问题。通过添加.zoom属性我们让.box元素拥有了haslayout属性，从而避免了重叠问题。

示例二

我们给元素设置过渡效果时，使用zoom属性可以避免元素动画效果闪屏的问题。

在CSS中，我们可以这样设置：

.box {
  display: inline-block; /*一定要设置display属性，才能使元素拥有haslayout属性*/
  zoom: 1;
  transition: all 1s;
}

当我们将元素的属性（如颜色、大小等）进行动态变化时，元素会平滑地过渡到新的属性，不会出现闪烁的现象。

综上所述，dom元素重新渲染及zoom属性在解决IE6和IE7中页面布局绘制问题时，显得非常实用。