你知道解決IE6 position:fixed固定定位問題方法嗎，這里和大家簡單分享一下，希望本文的介紹能讓你有所收獲。

解決IE6 position:fixed固定定位問題

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

◆關于position:fixed;屬性生成絕對定位的元素，相對于瀏覽器窗口進行定位。
元素的位置通過“left”,“top”,“right”以及“bottom”屬性進行規(guī)定。

position:fixed;可以讓網(wǎng)頁上的某個元素固定在一個絕對的位置，即使拉動滾動條位置也不發(fā)生變化。在LOO2K博客右下角的那個置頂?shù)男“粹o就是用了這個CSS屬性實現(xiàn)的

一般的position:fixed;實現(xiàn)方法以我的博客為例，在右下角<divid="top">...</div>這個HTML元素使用的CSS代碼如下：

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

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

◆在IE6中實現(xiàn)position:fixed;的辦法剛剛提過，在IE6中是不能直接使用position:fixed;。你需要一些CSSHack來解決它。當然，IE6的問題也不僅僅position:fixed;

相同的還是讓<divid="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就需要用上面的表達式來實現(xiàn)。其中在_position:absolute;中的_符號只有IE6才能識別，目的是為了區(qū)分其他瀏覽器。

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

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

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

◆這兩段代碼只能實現(xiàn)在最底部跟最頂部，你可以使用_margin-top:10px;或者_margin-bottom:10px;修改其中的數(shù)值控制元素的位置。

position:fixed;閃動問題現(xiàn)在，問題還沒有完全解決。在用了上面的辦法后，你會發(fā)現(xiàn)：被固定定位的元素在滾動滾動條的時候會閃動。解決閃動問題的辦法是在CSS文件中加入：

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

其中*是給IE6識別的。

到此，IE6的position:fixed;問題已經(jīng)被解決了。現(xiàn)在LOO2K這個博客上的固定定位就是使用的這個辦法解決IE6固定定位問題的。

【編輯推薦】

1. 深入探究margin在FF IE6 IE7中的兼容問題
2. 探究IE8與IE7具體功能中窗口功能按鈕的變化
3. IE6 IE7 IE8三個版本的CSS兼容速查手冊
4. IE6下使用CSS定義DIV高度行之有效的辦法
5. 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題