解决IE6下仿fixed定位抖动问题

fixed定位方式是指position:fixed,也就是固定定位。元素固定定位后,即使拖动页面滚动条,该元素还是钉在原位置,就像是一张纸贴在屏幕上一样。这效果非常酷,但该死的IE6却不支持。

但IE支持CSS中的expression,于是我们可以用expression表达式来模拟实现这种效果。CSS代码如下:

position:fixed !important;
z-index:100;top/**/:0px;
_position:absolute; _top:expression(offsetParent.scrollTop);

这是IE6模仿fixed定位的最简单的解决方式,代码少,不用写JS。但事情却没完。

此时在IE6下测试页面,会发现这元素的确随页面滚动而滚动了——是滚动,不是固定。当页面滚动时,你能看到此元素有明显的抖动状态,而且一点也不平滑(如果平滑的话,反而好了,JS都不用写了),非常影响视觉观感。

这是IE6一个极端无耻的bug,原理我不想多说了,只说下如何解决这个bug。方法很简单,只用CSS就可以:为html和body加上一张背景图片,并设置background-attachment:fixed.你看,还是用的一个fixed。

当然,背景图片可以是一个空白,所以完整代码如下:

html,body{_background-image:url(about:blank);
_background-attachment:fixed;}

再温馨提示一下:_这个符号,意思是只针对IE6.

—————————————————-

经测试,完美解决了IE6下fixed定位的抖动bug.

 

3 评论

  1. 如何在ie6中自由定位离上面或者下面定位的高度啊?我不想在最上,或者最下,我想自由定位!

发表评论

电子邮件地址不会被公开。