最近專案需要在系統頁面底部新增一個導航條，效果類似facebook。專案組成員上網查了一些辦法，也下載了一些JQuery外掛使用，但在IE6,IE7下面視窗縱向滾動會閃爍，而jquery.floatdiv有奇怪的執行錯誤。最後自己整理了一個簡單的解決辦法，在firefox3.5, IE6, IE7下測試通過。

需要固定在底部的DIV物件：

<div id="footpanel">i'm foot panel</div>

在firefox下，只要在css中指定

#footpanel {

position:fixed;

bottom: 0px;

}

就可以把footpanel固定在底部而且不閃爍，不需要額外的方法。

在IE6,IE7下，需要在css中新增

*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/


	margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/


	position: absolute;

	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));

}


呃，上面的方法是從

http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

抄來的，將footpanel固定在頁面底部。不要問我這個表示式是什麼意思。


不過上面的樣式新增之後，仍然不能解決在IE6,IE7下閃爍的問題，最後在jquery.floatdiv外掛中發現了辦法，改寫為js程式碼：


if ($.browser.msie && $.browser.version >= 6 && $.browser <8) {

if ($("body").css("background-image") == "none") {

$("body").css({"background-image":"url(nothing.gif)", "background-attachment":"fixed"});

} else {

$("body").css({"background-attachment" : "fixed"});

}

}


核心思路就是body必須有一個background-image的樣式，即使nothing.gif不存在也可以。

剩下的就是設定background-attachment為fixed。