這篇文章主要介紹了詳解IE6中的position：fixed問題與隨滾動條滾動的效果的相關資料,希望通本文能幫助到大家，需要的朋友可以參考下
# #詳解IE6中的position：fixed問題與隨滾動條滾動的效果
#前言：
在《【jQuery】相容IE6的滾動監聽》 （點擊開啟連結）提及到解決IE6fixed問題，具體是要引入一個js文件，還要聲明一條腳本就為這個p聲明fixed定位去解決，起始這樣很不好啊。引入的Javascript不好管理之餘，還要在head聲明引入javascript，之後又要給這個p聲明一個id，之後又要在腳本出弄一條聲明，實在是煩死了。
使用position：fixed無非是想做出如下的效果。
基本上position：fixed是在IE7以上的所有瀏覽器都是沒有問題的：
IE8：
野狐禪FireFox ：
然而由於IE6中直接就沒有position：fixed屬性，要做出如下的效果：
##只能利用position: absolute;加一段在css樣式中執行的javascript腳本去解決。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.fixedbox {
background: #69C;
height: 60px;
width: 100px;
position: fixed;
bottom: 100px;
/*IE6实现position: fixed;*/
/*等价于position: fixed;虽然代码好长，但是根本就不用管*/
_position: absolute;
_top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
/*等价于position: fixed;虽然代码好长，但是根本就不用管*/
_margin-bottom:100px;/*设置位置，不要用bottom，而是改用margin-bottom，margin-xx来实现*/
}
</style>
</head>
<body>
<p style="float:left;width:80%;min-height:100px;">
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
</p>
<p style="float:left;width:20%;min-height:100px;"><p class="fixedbox"></p></p>
<p style="clear:both"></p>
</body>
</html>登入後複製
上述程式碼，對於IE6的樣式，前面都加上了_，_的部分是IE6特定的重寫樣式聲明，具體見《【CSS】關於CSS樣式中的!important、*、 _符號》（點擊開啟連結）
而實際上，在IE6中，以下的CSS：
.fixed{
position: absolute;
top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
}登入後複製
等價於其它瀏覽器的：
.fixed{
position: fixed;
}登入後複製
當然IE6中實作position：fixed的CSS可能在某些瀏覽器中不正常，因此在各個樣式前面補上一條底線_，表示僅在IE6中執行。
同時IE6應有的如上樣式之後，不要像其它瀏覽器用right,top,left,bottom去定位，而是用margin-bottom,margin-left,margin-right去設定被position：fixed的p的位置，
這裡調節p的位置的時候還需要注意，由於上述的相容IE6的CSS利用到top的屬性，所以設定margin-top是不管用，如果你要設定這個p在浮動的時候，離瀏覽器的頂部是多少的話，你應該這樣寫：
.fixed{
/*IE6实现position: fixed;*/
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
_margin-top:100px;
}登入後複製
這裡關於_top的程式碼之所以短了這麼多，是因為無須用document.documentElement.clientHeight來獲取瀏覽器顯示視窗大小。
而-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)一切是為了微調更精確，如果你不想要也可以不加，只是有一點視覺效果而已。
再者，上述的程式碼，大家可以看到，關於fixedbox這個東西，我並沒有設定其right,left，是因為，我想讓其在滾動條滾動的時候，依舊能夠保持父級p的float:left屬性。
就是，右邊的藍色色塊，與左邊一大堆sss，依舊是80%與20%的分割。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
JavaScript在IE9之前版本中記憶體洩漏問題(詳細總結)
JavaScript hasOwnProperty() 函數（圖文教程，附有程式碼範例）
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區別和應用場景（實用技巧）
#
以上是詳解讀IE6中的position：fixed問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
