完美解決CSS中position爲fixed在IE6下無效的bug

完美解決CSS中position爲fixed在IE6下無效的bug

衆所周知IE6不支持CSS屬性position:fixed，這個CSS bug與IE6的雙倍margin和不支持PNG透明等bug一樣臭名昭著。

如何讓position:fixed在IE6中工作？

第一種方法：純CSS解決IE6的position：fixed的bug

html {
    _background-image:url(about:blank);  /*用瀏覽器空白頁面作爲背景*/
    _background-attachment:fixed;  /* IE6 確保滾動條滾動時，元素不閃動*/
}

#fixedDiv {
    width:960px; height:31px; z-index:100; /*設置浮動層次*/
    position:fixed; /* IE6以外的瀏覽器下定位*/
    top:50px; /* IE6以外的瀏覽器下定位*/
    _position:absolute;  /*IE6 用absolute模擬fixed*/
    _top:expression(documentElement.scrollTop+50+"px");  /*IE6 動態設置top位置爲50px */
}

fixedDiv爲要固定的元素的id。

這裏只實現了IE6下CSS position垂直方向的fixed。若要實現水平方向的fixed，設置_left:expression(documentElement.scrollLeft + "px");

 

第二種方法 用JavaScript解決IE6的position：fixed的bug

<script language="javascript" type="text/javascript">
window.onload = function () {
        var n = 100; //top值
        var obj = document.getElementById("fixed");  //fixed爲固定元素的id，獲得position:fixed對象
        window.onscroll = function () {
                obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + n + 'px';
        }
        window.onresize = function () {
                obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + n + 'px';
        }
}
</script>

這段javascript代碼也能解決IE6的position：fixed的bug。