fixed 定位在 IE6 下的实现技巧一则

向右看齐 2022-08-06 15:26 36阅读 0赞

从蓝色理想看到这贴：[固定在右下角的离奇方法][Link 1]

受上面帖子的启发，也做了一个demo：[ie6\_fixed\_position.html][ie6_fixed_position.html]

代码：

<div id="a" style="width: 300px; height: 100px; background: red">test</div>
    
    <script>
    
        var ie6 = !window.XMLHttpRequest;
    
    
    
        var a = document.getElementById('a');
    
        a.style.position = ie6 ? 'absolute' : 'fixed';
    
        a.style.right = 0;
    
        a.style.bottom = 0;
    
    
    
        if (ie6) {
       
    
            window.onscroll = function() {
       
    
                a.className = a.className;
    
            };
    
        }
    
    </script>

原理分析：

1.  `position: absolute` 的元素，直接放在`position:static` 的 body 中时，绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时，自动就能准确定位到右下角。注意：body 的 position 不能为 relative 等值，否则失效。
2.  onscroll 时需要特殊处理一下，使得滚动时，也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的`a.className = a.className` 就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有`a.style.background = 'red'` . 这些 hack 会引发 reflow, 但反之不一定，进一步的规律没找到，不过有一个 hack，也就够用了。

耐心总结，快乐分享，欢迎讨论。

[Link 1]: http://bbs.blueidea.com/thread-2938030-1-1.html
[ie6_fixed_position.html]: http://lifesinger.org/lab/2009/ie6_fixed_position.html

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE6浏览器不支持固定定位（position：fixed）解决方案

　　经过多次测试，原来不只在IE6下，在IE7、IE8浏览器下，若是文档使用的是怪异（quirk）模式也会导致这个问题。这也难怪，当IE7、8使用怪异模式时，渲染引擎

女爷i/ 2022年08月07日 04:43/ 0 赞/ 332 阅读

相关 IE6 position:fixed 固定定位问题

IE6下 position:fixed失效，解决方法如下：除了IE6的浏览器 .top \{ width: 97px; heigh

妖狐艹你老母/ 2022年08月07日 01:57/ 0 赞/ 263 阅读

相关 fixed 定位在 IE6 下的实现技巧一则

从蓝色理想看到这贴：[固定在右下角的离奇方法][Link 1] 受上面帖子的启发，也做了一个demo：[ie6\_fixed\_position.html][ie6_fixe

向右看齐/ 2022年08月06日 15:26/ 0 赞/ 37 阅读

相关 fixed固定定位

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <st

╰+哭是因爲堅強的太久メ/ 2022年06月18日 05:25/ 0 赞/ 246 阅读

相关关于css部份技巧,div/IE6/IE7/IE8/FF

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中

我不是女神ヾ/ 2022年05月16日 09:20/ 0 赞/ 315 阅读

相关 Ajax如何解决XMLHttpRequest在IE6下的兼容问题

//1 创建Ajax对象 if (XMLHttpRequest) { var oAjax = new XMLHttpRequest()

傷城~/ 2022年03月16日 11:28/ 0 赞/ 389 阅读

相关 png24图片在IE6下的透明度问题

png24图片中IE6下的透明度问题相信对于每个前端开发人员来说并不陌生！PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但是Mi

女爷i/ 2022年01月09日 16:05/ 0 赞/ 340 阅读

相关解决IE6下Position：fixed问题

原文地址：[http://hi.baidu.com/guodong828/blog/item/c52d3e34ab879b315bb5f54a.html][http_hi.ba

Myth丶恋晨/ 2021年12月10日 23:31/ 0 赞/ 307 阅读

相关 css ie6 ie7 ff的CSS hack使用技巧

FF浏览器 .test\{ height:20px; background-color:orange; \} IE7浏览器 \+html .test\{

我不是女神ヾ/ 2021年11月22日 14:06/ 0 赞/ 307 阅读

相关 css定位 absolute relative fixed

一.absolute 相对拥有absolute或者relative父级进行定位，也就是他会一直寻找自己父级是否有absolute或者relative属性，如果找到，选择最

迈不过友情╰/ 2021年06月10日 20:41/ 0 赞/ 429 阅读