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

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值