RM8013: IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed）

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：武利剑

标准参考

根据 W3C CSS2.1 规范中的描述，position:fixed 固定定位是绝对定位的子类。与绝对定位不同的是，固定定位的包含块由视口（viewport）创建的。

'position' 特性的 fixed 值允许一个元素绝对的相对于浏览器窗口定位。

关于 'position:fixed' 的详细信息，请参考 CSS 2.1 规范 9.6.1 Fixed positioning 中的内容。

在 CSS 1 版中，没有 position 定位特性，仅支持 CSS 1 的浏览器将不会拥有人和定位效果。

问题描述

IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed），对其设置 'position:fixed' 无任何效果。

造成的影响

由于 IE6 IE7(Q) IE8(Q) 将 'position' 特性的 fixed 值当作错误值处理，从而使用 'position' 特性的初始值 static，即这个元素在 IE6 IE7(Q) IE8(Q) 变成了普通流中的静态元素，这将会造成布局混乱等多种兼容性问题。

受影响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

对于此问题，我们通过以下的测试用例来说明。

分析以下代码：

<div id="DIV1" style="float:left; height:3000px;"></div> <div
                id="DIV2" style="position:fixed; top:300px;">fixed
                div</div>

DIV1 的高度为 3000px，使浏览器窗口出现滚动条；
DIV2 是固定定位元素，它的位置不会随页面滚动而变化。

根据 CSS2.1 规范中的描述可知，当页面中滚动条滚动时，DIV2 的位置应该不发生变化。

以上测试用例在不同的浏览器中打开，除 IE6 IE7(Q) IE8(Q) 外，滚动窗口，DIV2 中的文本“fixed div”会一直位于窗口中部。

【注】：从 IE6 开发以及发布时间可知，当时 CSS 2.0 的成文规范还没有推出。反观 MSND 中说明 IE 4.0 版本以上即支持除 'position:fixed' 外其定位特性值设置。这意味着 IE6 以及之前的 IE 版本所支持的 'position' 特性并非 CSS 2.0 规范中描述的定位特性，他是遵循 IE 自身定义的渲染规范的。

解决方案

在 IE6 IE7(Q) IE8(Q) 中为固定定位元素设置 'position:absolute'，再通过 JavaScript 脚本或者 CSS Expression 动态设置其偏移量。

参考代码如下：

<body style="font:12px Arial; _background-attachment:fixed;
                _background-image:url(about:blank);"> <div style="width:10000px; height:10000px;"></div>
                <div id="d" style="position:fixed; top:0; left:0; _position:absolute;
                _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft); background:#ddd;
                width:100px; height:100px;"></div> </body>

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6.6 Chrome 6.0.447.0 dev Safari 5.0
测试页面:	fixed_position.html fixed_sol.html
本文更新时间:	2010-07-21