CSS相容性考慮-如何用css固定位置

有的時候我們需要將一個div固定在一個螢幕的指定位置，如在使用loading狀態條的時候，或者顯示線上使用者數的時候。需要的是將div顯示在網頁的中間，頂端或者左下端，並且無論捲軸如何拉動，這個div將始終保持在相同的相對位置。這些要求用css是很可以容易實現的，只需要用到position:fixed這個描述參數即可。和position: fixed;平行的描述語言有 position: absolute; position: relative; position: static;這裡主要講一講fixed和absolute的區別，fixed表示始終處於同螢幕的一個位置，即使你拉動捲軸，依然會顯示在螢幕的相對位置，而absolute則不一樣，absolute針對網頁的位置進行描述，所以拉動捲軸後有可能會將顯示在中部的div拉動到頂端去，因此，下面的一段css將會把div放在螢幕的中央：

(show/hide)plain text

1. #LoadingStatus{
2. position:fixed ;
3. top:100px;/*始終距離螢幕的高度是100px*/

 

/*後面的描述和位置無關，所以後面的例子請大家關注本行之前的描述*/
width:220px;height:20px;
left:50%;
margin:0 0 0 -110px;/* 將div將左端推進一半的長度，這樣才能顯示到真正的中間 */
border:1px solid red;
}
如果你用這段css去做實驗的話，我相信多數朋友看不到應有的效果，原因在於你用的是IE，那個對w3標準支援不完善的瀏覽器，如果你用firefox的話，應該是沒有任何問題的。不過我們得承認現實，畢竟IE的瀏覽器佔據了絕大部分市場，所以必須寫出相容IE的css才行。由於IE不支援fixed，因此，可以針對IE和FF寫不同的css，如：

(show/hide)plain text

1. div#LoadingStatus { position: absolute; left: 0px; top: 0px; }
2. body > div#LoadingStatus { position: fixed;/*這個描述IE不認識，因此針對其他瀏覽器有效*/ }

上面的代碼解決了相容的問題，但是IE下的依然不能將div固定在螢幕的具體位置，因此我們只有出絕招了，那便是寫出相容的css，代碼如下（傳說出現運算式的css出現了）：

(show/hide)plain text

1.  
2. div#LoadingStatus{
3. left: 50%;
4. top: expression( document.body.scrollTop +100 +'px' );/*按照運算式計算出當前螢幕位置所對應的網頁位置*/
5. }
6. body > div#LoadingStatus{ position: fixed; left: 0px; top: 100px; }

這樣看來似乎已經很完美了，應該能夠得到我們需要的效果了，不信，你自己試一試。對不起，讓你失望了，這還是不行，因為我們在拉動捲軸的時候，針對IE的那段css中的運算式罷工了，僅僅是載入頁面的時候進行了計算，後面就不幹活了，這可如何是好？別擔心，一個IE的bug而已，我們只要將運算式的值賦給一變數，這個問題就解決了，所以下面的css就可以正常工作了：

margin:0 0 0 -110px;
width:220px;height:19px;
left:50%;
text-align:center;
border:1px solid red;

}Rendering...#LoadingStatus{
position:fixed !important;/*important針對FF，這樣後面的position描述就沒有用了 */
position:absolute;/* 針對IE */
top:100px;
top: expression( ( 100 + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
/*上面這個運算式針對IE，FF不認識該運算式，所以top的值就是100px了 */

 

margin:0 0 0 -110px;
width:220px;height:19px;
left:50%;
text-align:center;
border:1px solid red;

}

(show/hide)plain text

1. #LoadingStatus{
2. position:fixed !important;/*important針對FF，這樣後面的position描述就沒有用了 */
3. position:absolute;/* 針對IE */
4. top:100px;
5. top: expression( ( 100 + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
6. /*上面這個運算式針對IE，FF不認識該運算式，所以top的值就是100px了 */
7. margin:0 0 0 -110px;
8. width:220px;height:19px;
9. left:50%;
10. text-align:center;
11. border:1px solid red;
12. }

 

那麼如何將div固定在左上方或者右下角呢？下面給點css代碼，應該自己看看就能明白了：
div#LoadingStatus {
/* IE5.5+/Win – this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 – fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( noValue2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ‘px’ );
top: expression( ( -10 – fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
}
忘記給案例了，要不又有朋友有意見了，案例請參見附件：fix.html