CSS行为expression轻松实现IE6无抖动固定定位

关于IE6不支持固定定位的问题及其解决方案

我们都知道，IE6并不支持CSS中的固定定位（position:fixed）。为了在IE6中实现固定定位的效果，我们常常需要使用JavaScript。使用JS实现的方式常常会导致元素出现“跳动”的现象。那么，是否有一种方法既不使用JS又能避免元素跳动呢？答案是肯定的，我们可以借助CSS中的行为expression。

行为expression是一种特殊的机制，允许我们在CSS属性后面添加一段JavaScript表达式。这个表达式的计算结果将作为CSS属性的值。在表达式中，我们可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这就像在元素的成员函数中执行代码一样。

为什么使用行为expression能解决问题呢？因为行为expression是IE特有的功能，其他浏览器无法识别，这样就可以实现针对IE6的特定样式。

具体的实现方法是，在CSS中使用行为expression来模拟固定定位的效果。例如：

```css

backtop {

width: 40px;

height: 45px;

position: fixed; / 所有浏览器 /

right: 0px;

bottom: 10px;

z-index: 9;

_position: absolute; / 仅针对IE6 /

_top: expression(eval(document.documentElement.scrollTop + 430)); / 仅针对IE6 /

border: none;

overflow: hidden;

}

```

使用行为expression来实现固定定位仍然会遇到一个问题，那就是元素会跳动。为什么会这样呢？这是因为IE浏览器的渲染进程是多步的。当页面滚动或浏览器大小调整时，它会重置所有内容并重新绘制页面。在这个过程中，它会重新处理CSS表达式。由于DOM结构的渲染先于CSS，这会导致一个“抖动”的bug。为了解决这个问题，我们可以为body或html元素添加一个background-image，并设置background-attachment为fixed。这样做可以强制页面在重画之前先处理CSS，包括你的CSS表达式。这样，你就可以实现平滑的固定位置元素了。而且，这个background-image并不需要真实的图片，设置为about:blank即可。

解决元素跳动问题的代码示例：

```css

body {

/ 针对IE6在重画之前处理CSS /

_background: url(about:blank);

_background-attachment: fixed;

}

```

通过以上的方法，我们可以在不使用JavaScript的情况下，实现IE6中的固定定位效果，并且解决元素跳动的问题。