IE6/7在滚动区域内的标签使用position会飘出这个滚动区域不随滚动条滚动

问题描述

在IE6/7浏览器中，当在滚动区域内使用css属性 position: absolute 或 position: fixed 的元素时，该元素会出现跑出滚动区域的情况，具体表现为该元素不会随着滚动条的滚动而滚动，而是固定在页面顶部或左侧。

解决方案

在IE6/7浏览器中，使用 zoom:1 和 position: relative 的结合解决该问题。

示例一：

HTML结构：

<div style="height: 200px; overflow: auto;">
  <div style="height: 300px; background-color: #f0f0f0;">
    <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;"></div>
  </div>
</div>

CSS样式：

div {
  zoom: 1;
  position: relative;
}

在上面的示例中，父级元素 div 的样式设置为 zoom: 1; position: relative; 时，子元素 div 的定位就会受到父级元素的影响，解决了元素跑出滚动区域的问题。

示例二：

HTML结构：

<div style="height: 200px; overflow: auto;">
  <div style="height: 300px; background-color: #f0f0f0;">
    <div style="position: fixed; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;"></div>
  </div>
</div>

CSS样式：

div {
  zoom: 1;
  position: relative;
}

div div {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop) + 50);
  left: expression(eval(document.documentElement.scrollLeft) + 50);
}

上面的示例中，子元素 div 的样式设置为 position: absolute; top: expression(eval(document.documentElement.scrollTop) + 50); left: expression(eval(document.documentElement.scrollLeft) + 50);，通过javascript表达式，实现让子元素 div 的位置跟随页面滚动而滚动。

注意事项

在IE6下，zoom 属性可以触发 hasLayout，让元素拥有独立的渲染区域，解决元素高度塌陷等问题。
在IE6/7下，定位元素使用了 position: absolute 或 position: fixed，需要设置 zoom 和 position:relative。
在IE6/7下，用 expression 表达式使元素在滚动时发生位移，要跟 position:absolute 一起使用。
在IE8+和其他大部分现代浏览器中不需要使用这种解决方案，元素定位与滚动互不影响。