關於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 才能識別，目的是爲了區分其餘瀏覽器。

上面的只是一個例子，下面的纔是最重要的代碼片斷：
使元素固定在瀏覽器的頂部
#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; 問題已經被解決了。如今 LOO2K 這個博客上的固定定位就是使用的這個辦法解決 IE6 固定定位問題的。

PS:在vs裏面,帶*是不能被格式化的,建議少用*(2013.07.15)

 

原文地址:http://loo2k.com/blog/ie6-position-fixed/.

 

剛剛在網站添加一個微信二維碼的例子(2013.10.14):

.adClass
{
    background: none repeat scroll 0 0 white;
    border: 1px solid lightGrey;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #DDDDDD;
    left: 50.5%;
    top:12%;
    margin-left: 510px;
    overflow: hidden;
    position: fixed;
    visibility: visible;
    z-index: 100;
    _position:absolute;
    _bottom:auto;
    /*固定左邊*/_top:expression(eval(240+ document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||660)));
    /*固定頂部*/_top:expression(eval(document.documentElement.scrollTop+100))
}

 

五行代碼終極完美解決從IE6到Chrome全部瀏覽器的position:fixed;以及閃動問題:(2013.1.12)

這個方法其實已經使用好久了，以前主要在嵌入式WebQQ等產品中用過，如今拿出來分享一下吧，是目前最簡潔的方式來實現ie6的position:fixed; 失效bug，以及的其餘方法的閃動問題，CSS代碼以下，很簡單，自行修改調試便可：
html{
_background:url(about:blank); /* 阻止閃動 in IE6 , 把空文件換成about:blank , 減小請求 */
}

/* 你的圖層 */
.positionFixedLayer{
position:fixed;
_position: absolute;
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth-200);
}