IE6 IE7(Q) IE8(Q) 不支持固定定位(position:fixed)
2013-10-08 14:18
471 查看
作者:武利剑
'position' 特性的 fixed 值允许一个元素绝对的相对于浏览器窗口定位。
关于 'position:fixed' 的详细信息,请参考 CSS 2.1 规范
9.6.1 Fixed positioning 中的内容。
在 CSS 1 版中,没有 position 定位特性,仅支持 CSS 1 的浏览器将不会拥有人和定位效果。
分析以下代码:
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 自身定义的渲染规范的。
参考代码如下:
原文地址:http://www.w3help.org/zh-cn/causes/RM8013
标准参考
根据 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 |
关键字
position fixed 固定 定位原文地址:http://www.w3help.org/zh-cn/causes/RM8013
相关文章推荐
- IE6 IE7(Q) IE8(Q) 不支持固定定位(position:fixed)
- IE6浏览器不支持固定定位(position:fixed)解决方案
- IE6浏览器不支持固定定位(position:fixed)解决方案
- IE6浏览器不支持固定定位(position:fixed)解决方案
- ie6,ie7,ie8完美支持position:fixed的终极解决方案
- IE6浏览器不支持固定定位(position:fixed)解决方案(转)
- ie6,ie7,ie8完美支持position:fixed的终极解决方案
- 解决IE6浏览器下position:fixed固定定位问题
- 解决 IE6 position:fixed 固定定位问题
- 解决IE6浏览器下position:fixed固定定位问题
- 解决IE6浏览器下position:fixed固定定位问题
- ie6不识position:fixed,固定定位的其它实现
- 解决IE6浏览器下position:fixed固定定位问题
- 学习笔记 如何解决IE6 position:fixed固定定位问题{转载}
- IE6 position:fixed 固定定位问题
- 解决IE6浏览器下position:fixed固定定位问题
- 解决IE6浏览器下position:fixed固定定位问题
- 解决 IE6 position:fixed 固定定位问题!
- position:fixed 固定定位(兼容IE6)问题及关闭浮动框的JS
- 完美解决IE6浏览器下不兼容position:fixed固定定位