就像你所遇到的問題一樣, IE6 有太多的 bug 讓制作網頁的人頭疼。這篇文章介紹的是介紹我的如何解決 IE6 不支持 position:fixed; 屬性的辦法。
生成絕對定位的元素,相對於浏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
position:fixed; 可以讓網頁上的某個元素固定在一個絕對的位置,即使拉動滾動條位置也不發生變化。(在 LOO2K 博客右下角的那個置頂的小按鈕就是用了這個 CSS 屬性實現的)
以我的博客為例,在右下角<div id="top">...</div>
這個 HTML 元素使用的 CSS 代碼如下:
#top{ position:fixed; bottom:0; right:20px;}
實現讓<div id="top">...</div>
元素固定在浏覽器的底部和距離右邊的20個像素。
剛剛提過,在 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 才能識別,目的是為了區分其他浏覽器。