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

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

我要評(píng)論

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

　　今天在學(xué)習(xí)的時(shí)候，突然發(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中打開(kāi)，效果如下：

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

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

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

　　解決方案： 　　

　　在 IE6、IE7（quirk模式）、IE8（quirk模式）中為固定定位元素設(shè)置 '_position:absolute'，再通過(guò) JavaScript 腳本或者 CSS Expression 動(dòng)態(tài)設(shè)置其偏移量，但是我發(fā)現(xiàn)只能實(shí)現(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)));
}

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

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

復(fù)制代碼

代碼如下:

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

或者：

復(fù)制代碼

代碼如下:

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

　　當(dāng)然，也可以用吧javascript方法解決，不過(guò)有點(diǎn)大材小用：

復(fù)制代碼

代碼如下: