完美解决IE6中fixed抖动问题的方法

我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的。通常的作法,我们用JS或者IE表达式来达到这个效果。

如:

.fixed{ 
   position: fixed; 
   _position: absolute; 
   _top: expression(eval(document.documentElement.scrollTop)); 
   } 

可惜,又遇到一个问题,页面滚动的时候,会出现抖动现象.

如果解决呢?

无意中发现我们momo社区的左侧导航栏在IE6下页面滚动时候居然不抖动,看了下CSS,和上面的表达式没有任何区别呀。。。

于是对HTML和CSS进行最简化删除,最终发现,原来是body属性中设置了背景图片刚好解决了这个抖动的问题!

body中设置了一个样式:

body{ 
   background: url(body.jpg) fixed; 
   } 

上网搜了下,居然已经有人这样通过这个办法解决,顺便还找到了另一个解决方法,总结如下:

方法1

.fixed{ 
   position: fixed; 
   _position: absolute; 
   _top: expression(eval(document.documentElement.scrollTop));} 
   html{ 
   _text-overflow:ellipsis; 
   } 

方法2

.fixed{ 
   position: fixed; 
   _position: absolute; 
   _top: expression(eval(document.documentElement.scrollTop)); 
   } 
   html { 
   _background: url(xx.jpg) fixed; /* 文件不存在亦可以,随便命名 */
   } 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值