原作者網址：http://www.sjyhome.com/css/let-ie6-support-position-fixed.html

解決IE6不支持position:fixed;的問題

SJY ? 發表於：2013年08月05日 00:00 ? 閱讀：993

在網頁設計中，時常要用到把某個元素始終定位在屏幕上，即使滾動瀏覽器窗口也不會發生變化。

一般我們會使用position:fixed來進行絕對固定，但IE6並不支持position:fixed屬性，所以必須對IE6進行”特殊照顧”。

實驗

我們想要把元素定位在瀏覽器的底部

HTML代碼

<div class="box">
</div>
<div class="content"></div>
 

CSS代碼

.box{
background:#69C;
height:60px;
width:500px;
position:fixed;
left:0;
bottom:0;
}
.content{
height:5000px;/*使內容足夠長，方便查看滾屏效果*/
background:#9CF;
}

此刻在火狐中已經正常了，接下來為IE6增加一些針對性的代碼，在box中加入

_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
 

現在IE6中已經實現固定定位的效果了，但是移動滾動條時，會出現閃屏，所以還需要在box中加入

*html{
background-image:url(about:blank);
background-attachment:fixed;
}

分析

定位的位置left和right可以用絕對定位的方法解決，所以上面加了專門針對IE6的絕對定位

_position:absolute;而 top 跟 bottom 就需要用上面的表達式來實現。

如果想要把box元素定位在瀏覽器的頂部，只需要修改_top的值，代碼如下

_top:expression(eval(document.documentElement.scrollTop));
 

如果希望box元素不是位於最頂部，也不是位於最底部，你可以使用 _margin-top:30px;或_margin-bottom:30px;修改其中的數值來控制元素的位置。

IE6不支持position:fixed;的問題已經徹底解決了，想要更深入的理解，就多動動手吧！

IE6不支持position的問題