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

Posted 2020-10-02 blfbuaa

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次以上的计算量。由此可见一斑。