CSS实现IE6固定定位及解决"抖动"的原理

　　虽然现在网上有许多用JS或JQ封装的函数，用于实现的兼容IE6的固定定位，但似乎有点大材小用，其实可以用CSS的expression解决：

_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));

　　如上设置后会出现一个问题，固定的元素背景在滑动会抖动，解决方案：

* html{
    background-image:url(about:blank);
    background-attachment:fixed;
}

完整的CSS代码：

* html{
    background-image:url(about:blank);
    background-attachment:fixed;
}
#nav{
    position:fixed;
    top:0;
    left:0;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop));
}

 

 需要注意的是：
　　*html{ background-image:url(about:blank);background-attachment:fixed;}

由于IE的一个多步渲染进程。当滚动或调整浏览器大小时，该进程将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上页面的滚动，于是就会“跳动”。

解决办法就是使用background-attachment:fixed为body或html元素添加一个background-image。
　　这会强制页面在重画之前先处理CSS。
因为是在重画之前处理CSS，故在重画之前首先处理你定义的CSS表达式。从而实现完美的平滑固定！

无需一个真实的图片！你可以使用一个about:blank替代一个spacer.gif图片，而且它工作的同样出色。

 

 

原文链接：http://www.cnblogs.com/slowsoul/archive/2013/05/31/3110135.html