首页 > 代码库 > IE6下position:fixed不支持问题及其解决方案

IE6下position:fixed不支持问题及其解决方案

2024-07-04 21:32:04   224人阅读

IE6有诸多奇葩，不支持position:fixed就是其中之一。所以在做一些比如固定在顶部或者底部或者固定元素的效果时需要考虑兼容IE6的这个问题。解决方案是用Ie6的hack。

*html {/* 只有IE6支持 */
    background-image: url(about:blank); 
    background-attachment: fixed; /* 固定背景 */
}
#box {
    /* 非IE6浏览器使用固定元素 */
    position: fixed;
    top: 0;
    left: 0;
    /* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}
这里还需要解决的是“抖动”的问题，因为当你滚动滚动条的时候expression下的样式一直在重新计算并且执行css，会产生延迟的抖动。而在使用固定背景之后，在滚动的时候先执行了css，再重新计算网页，所以不会产生抖动的现象。
下面是固定到底部的代码，需要仔细看一下：

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
PS：在网上看到expression的诸多弊病，也是雅虎34条里面竭力避免使用css表达式的一个重要原因，摘引一段话：表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。由此可见一斑。


联系
我们