解決IE6瀏覽器下position:fixed 固定定位問題 底部

像你所遇到的問題同樣， IE6瀏覽器有太多的bug讓製做網頁的人頭疼。這篇文章介紹的是介紹的是如何解決IE6不支持position:fixed;屬性的辦法。若是咱們須要作某個元素始終位於瀏覽器的底部，不會由於瀏覽器窗口的縮放和滾動條的滾動而變化，那個確定是想到的用position:fixed生成絕對定位，只要設置這個CSS屬性就能達到剛剛的需求。當其餘瀏覽器都正常顯示的時候，只有IE6不那麼完美。該元素的位置是經過"left", "top", "right" 以及 "bottom" 屬性進行規定。

 

通常的 position:fixed; 實現方法

以個人博客爲例，在右下角 <div id="top">...</div>這個 HTML 元素使用的 CSS 代碼以下：

 

#top{
position:fixed;
bottom:0;
right:20px;
}

 

 

實現讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素。

 

在 IE6 中實現 position:fixed; 的辦法

剛剛提過，在IE6中是不能直接使用 position:fixed; 。你須要一些 CSS Hack 來解決它。固然，IE6 的問題也不單單position:fixed;

相同的仍是讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素，此次的代碼是：

 

#top{
position:fixed;
_position:absolute;
bottom:0;
right:20px;
_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)));
}

 right 跟 left 屬性能夠用絕對定位的辦法解決，而 top 跟 bottom 就須要用上面的表達式來實現。其中在_position:absolute; 中的 _ 符號只有 IE6 才能識別，目的是爲了區分其餘瀏覽器。

上面的只是一個例子，下面的纔是最重要的代碼片斷：

使元素固定在瀏覽器的頂部：

 

#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

 

 使元素固定在瀏覽器的底部：

 

#top{
_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)));
}

 這兩段代碼只能實如今最底部跟最頂部，你可使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的數值控制元素的位置。

 

 

position:fixed; 閃動問題

如今，問題尚未徹底解決。在用了上面的辦法後，你會發現：被固定定位的元素在滾動滾動條的時候會閃動。解決閃動問題的辦法是在 CSS 文件中加入：

 

 

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

  其中 * 是給 IE6 識別的。

到此，IE6 的 position:fixed; 問題已經被解決了。這裏還爲你們蒐集了一個採用JS解決的辦法。

JS的解決方案

 

JS是我最不肯使用的解決方案,由於這種純樣式的bug用JS來解決有點大材小用,並且JS須要DOM載入後才執行,有可能會出現閃屏的現象.

JS的解決方案很簡單,經過設置一個top來實現,top是指分頁的上邊距離document的上邊的長度,能夠被分解成下面幾項(並非完整的代碼)

 

top = scrollTop + clientHeight - height(分頁的高度)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

scrollTop和clientHeight分別用來解決上面兩個問題,滾動條的滾動會影響到scrollTop,而窗口的變化會影響到clientHeight,因此當這兩個事件被觸發時必須重置top,因而就造成相似下面的代碼,但這段腳本的刷新率會很是高,估計有性能問題.

 

 

window.onresize = window.onscroll = function(){
    //reset top
};