解决IE6不支持positionfixed的bug

在网站中经常用到“回到顶部”或者悬浮在两侧的类似效果，达到这种效果需要用到固定定位，即position:fixed;，但是IE6并不支持这个属性值，因此要相对于ie6进行兼容性调整。

现将demo奉上：

<div class="left">左侧居顶部悬浮</div>
<div class="right">右侧居底部悬浮</div>
           

其css为：

.left{display:inline-block; zoom:1; *display:inline; position:fixed; top:0; left:0;}
.right{display:inline-block; zoom:1; *display:inline; position:fixed; bottom:0; right:0;}
           

以上的css对于IE6以上的浏览器其效果是完全可以实现的，但是IE6，它总是那么特殊，现在用CSS表达式(expression)针对IE6进行兼容处理，用的hack方法：

.left{display:inline-block; zoom:1; *display:inline; position:fixed; top:0; left:0; _position:absolute; _left:expression(eval(document.documentElement.scrollLeft)); _top:expression(eval(document.documentElement.scrollTop));}
.right{display:inline-block; zoom:1; *display:inline; position:fixed; bottom:0; right:0; _position:absolute; _left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)); _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
           

如果需要距左距右都有位移的话，需要在0的基础上增减数字，例如距左或距右10px，css如下：

.left{display:inline-block; zoom:1; *display:inline; position:fixed; top:10px; left:10px; _position:absolute; _left:expression((eval(document.documentElement.scrollLeft))+10); _top:expression((eval(document.documentElement.scrollTop))+10);}
.right{display:inline-block; zoom:1; *display:inline; position:fixed; bottom:10px; right:10px; _position:absolute; _left:expression((eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0))-10); _top:expression((eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))-10);}
           

因为定义固定定位的位置，始终是以左上角为基准，所以要在left和top的基础上进行增减的操作。

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！

解决IE6的震动bug，具体css样式如下：

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

有了这种方法，再也不怕IE6来捣乱了O(∩_∩)O~