萬盛學電腦網

 萬盛學電腦網 >> CMS教程 >> IE6 position:fixed 固定定位問題的解決 方法

IE6 position:fixed 固定定位問題的解決 方法

class="area"> IE6 position:fixed 固定定位問題的解決 方法:

就像你所遇到的問題一樣, IE6 有太多的 bug 讓制作網頁的人頭疼。這篇文章介紹的是介紹我的如何解決 IE6 不支持 position:fixed; 屬性的辦法

關於 position:fixed; 屬性

生成絕對定位的元素,相對於浏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

position:fixed; 可以讓網頁上的某個元素固定在一個絕對的位置,即使拉動滾動條位置也不發生變化。(在 LOO2K 博客右下角的那個置頂的小按鈕就是用了這個 CSS 屬性實現的)

一般的 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 才能識別,目的是為了區分其他浏覽器

copyright © 萬盛學電腦網 all rights reserved