IE6中fixed無效如何解決

Posted on by

IE6不支援css fixed設定，當然就會有人去發現解決之道囉。

常見的解決方法有二種：

1. 使用css hack的方法

2. 使用javascript來修正

方法一：

通常都是將要做fixed效果的標籤和正常的所有網頁內容區隔，然後用一個div將fixed之外的所有內容包裝起來，並讓做為封裝的標籤和html的寬高一致。而要做fixed的標籤則position設為absolute, 看起來像是只有兩個大標籤，fixed標籤固定不動，內容包裝標籤就像是整個網頁內容。記得要將html的overflow設為hidden。

參考來源：position:fixed for internet explorer

方法二：

用jquery觸發scroll事件時，重新指定fixed標籤的絕對位。我是覺得這個方法比較好，不用為了一個ie6就去動排版。

<程式碼>

<html><head>
<script language="javascript" type="text/javascript" src="jquery-1.5.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
if ($.browser.msie && $.browser.version == '6.0') {
$('#myUL').css({position:'absolute',top:35,left:200});
$(window).scroll(function(){
$("#myUL").css({top:$(this).scrollTop()+35});
});
}
else{
$('#myUL').css({position:'fixed',top:35,left:200});
}
});
</script>
</head>
<body>
<ul><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
<li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li><li>TEST !</li>
</ul>
<ul id='myUL'>
<li>TEST for fixed !</li>
<li>TEST for fixed !</li>
<li>TEST for fixed !</li>
<li>TEST for fixed !</li>
</ul>
</body></html>

上面jquery的程式碼先判斷是否是ie6不是的話正常使用fixed，如果是則用absolute並利用window的scroll事件修改應停駐標籤坐標屬性。運行起來可能不像使用css hack方法來的順暢，但是較靈活。所以就由用的人自已判斷要用哪個方法。

發表留言