fixed 定位在 IE6 下的实现
2010-03-02 11:46
246 查看
下面的方法可以在IE6下实现fixed定位。
1. position: absolute的元素,直接放在position:static的 body 中时,绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时,自动就能准确定位到右下角。注意:body 的 position 不能为 relative 等值,否则失效。
2. onscroll onresize时需要特殊处理一下,使得滚动时,也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的a.className = a.className就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有a.style.background = 'red'. 这些 hack 会引发 reflow, 但反之不一定,进一步的规律没找到,不过有一个 hack,也就够用了。
1. position: absolute的元素,直接放在position:static的 body 中时,绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时,自动就能准确定位到右下角。注意:body 的 position 不能为 relative 等值,否则失效。
2. onscroll onresize时需要特殊处理一下,使得滚动时,也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的a.className = a.className就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有a.style.background = 'red'. 这些 hack 会引发 reflow, 但反之不一定,进一步的规律没找到,不过有一个 hack,也就够用了。
<div id="a" style="position:absolute;right:1px;bottom:1px;width: 300px; height:100px;background: red">test</div> <script type="text/javascript"> var ie6 = !window.XMLHttpRequest; var a = document.getElementById('a'); a.style.position = ie6 ? 'absolute' : 'fixed'; if (ie6) { window.onscroll = function() { a.className = a.className; }; window.onresize = function() { a.className = a.className; }; } <script>
相关文章推荐
- ie6不识position:fixed,固定定位的其它实现
- fixed 定位在 IE6 下的实现技巧一则
- 在IE6下实现fixed定位效果
- 解决 IE6 position:fixed 固定定位问题!
- CSS,实现IE6固定定位及解决"抖动"的原理
- 【代码片段】jQuery实现页面滚动时层智能浮动定位-Fixed Floating Elements
- 固定浮动定位(fixed)实现思路及代码
- 实现 IE6 支持 position fixed 的 CSS 属性
- expression模拟IE6下fixed定位
- 解决IE6浏览器下position:fixed固定定位问题
- javascript实现ie6兼容position:fixed
- 在 IE6 中实现 position:fixed; 的办法
- 【IE6 BUG大全】position:fixed在IE6下的实现
- 固定定位position:fixed实现高度自适应
- ie6下实现position:fixed效果实例介绍
- 兼容IE6的fixed定位,解决闪动问题
- ie6固定定位层fixed
- 解决 IE6 position:fixed 固定定位问题
- 学习笔记 如何解决IE6 position:fixed固定定位问题{转载}
- 解决 IE6 position:fixed 固定定位问题