IE6中fixed無效如何解決

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方法來的順暢,但是較靈活。所以就由用的人自已判斷要用哪個方法。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s