IE6瀏覽器不支持固定定位（position：fixed）解決方案

發(fā)布時間：2012-12-04 10:54:05 作者：佚名

我要評論

有些朋友在進行網(wǎng)頁布局時，會遇到IE6瀏覽器不支持固定定位(position：fixed)，本文將詳細介紹此問題的解決方法，需要了解的朋友可以參考下

　　今天在學(xué)習的時候，突然發(fā)現(xiàn)在IE6瀏覽器下，position：fixed不管用了：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<div style="width:600px;height:2000px;background-color:#f90;">正常普通流元素</div>
<div style="position:fixed;bottom:10px;left:50px;width:400px;height:200px;background-color:#111;color:#fff;">position：fixed元素</div>
</body>
</html>

　　上面的代碼在IE6中打開，效果如下：

　　而在其他瀏覽器（IE7+、firefox、opera、safari、chrome）下則正常顯示：

　　經(jīng)過多次測試，原來不只在IE6下，在IE7、IE8瀏覽器下，若是文檔使用的是怪異（quirk）模式也會導(dǎo)致這個問題。這也難怪，當IE7、8使用怪異模式時，渲染引擎將以接近IE6的渲染模式來解析CSS。最后，我得出了以下結(jié)論：

　　 IE6、IE7（quirk模式）、IE8（quirk模式）瀏覽器將 'position' 特性的 fixed 值當作錯誤值處理。從而導(dǎo)致使用固定定位的元素使用 'position' 的默認值 static。即這個元素在此時變成了普通流中的元素，這必然會導(dǎo)致布局錯位等問題。

　　解決方案： 　　

　　在 IE6、IE7（quirk模式）、IE8（quirk模式）中為固定定位元素設(shè)置 '_position:absolute'，再通過 JavaScript 腳本或者 CSS Expression 動態(tài)設(shè)置其偏移量，但是我發(fā)現(xiàn)只能實現(xiàn)在最底部和最頂部固定。要想設(shè)置具體的位置還需要配合_margin。

使元素固定在瀏覽器的頂部：

復(fù)制代碼

代碼如下:

#top {
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop));
}

使元素固定在瀏覽器的底部：

復(fù)制代碼

代碼如下:

#bottom {
_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)));
}

　　這兩段代碼只能實現(xiàn)在最底部跟最頂部，你可以使用 _margin修改其中的數(shù)值控制元素的位置。

　　看到這里，你一定以為已經(jīng)完事了。NO！還有bug：被固定定位的元素在滾動滾動條的時候會出現(xiàn)一閃一閃的情況。解決這個問題的辦法是在 CSS 文件中加入：

復(fù)制代碼

代碼如下:

* html{
background-image:url(about:blank);
background-attachment:fixed;
}

或者：

復(fù)制代碼

代碼如下:

body {
_background-attachment:fixed;
_background-image:url(about:blank);
}

　　當然，也可以用吧javascript方法解決，不過有點大材小用：

復(fù)制代碼

代碼如下: