TAT.Kinvix 五行代码终极完美解决从 IE6 到 Chrome 所有浏览器的 position:fixed; 以及闪动问题
In 未分类 on 2012年06月29日 by view: 17,644
22

这个方法其实已经使用很久了，之前主要在嵌入式 WebQQ 等产品中用过，现在拿出来分享一下吧，是目前最简洁的方式来实现 ie6 的 position:fixed; 失效 bug，以及的其他方法的闪动问题，CSS 代码如下，很简单，自行修改调试即可：



html{
_background:url(about:blank); /* 阻止闪动 in IE6 , 把空文件换成 about:blank , 减少请求 */
}

/* 你的图层 */
.positionFixedLayer{
position:fixed;
_position: absolute;
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth-200);
}

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2012/06/five-lines-of-code-perfect-solution-flashing-problem-from-ie6-to-the-chrome-browser-the-position-fixed/

如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们
有你的支持，我们会做得更好！
分享到:0

  1. 千墨 2015 年 2 月 2 日

    用 expression 的不能算办法吧= =

    回复

  2. intellectual 2013 年 7 月 26 日

    没有帮助

    回复

  3. Marker 2012 年 10 月 30 日

    好几年的老代码啦，不知道说什么好！让标题吓着啦

    回复

  4. Acos 2012 年 10 月 27 日

    无需用到 expression 及 JS 脚本就能使 IE6 支持 fixed .. 好几年前就出来解决方案了

    回复
    • TAT.Kinvix

      TAT.Kinvix 2012 年 10 月 27 日

      你说的是哪种方法？代码量是多少？

      回复

  5. 完美解决IE6等所有浏览器的position:fixed;以及闪动问题 | 米皮 2012 年 9 月 17 日

    […] Blog 之 五行代码终极完美解决从 IE6 到 Chrome 所有浏览器的 position:fixed; 以及闪动问题 此条目发表在 代码片段 分类目录。将固定链接加入收藏夹。 ← […]

    回复

  6. ad 2012 年 8 月 28 日

    那里面的位置参数在哪里修改。。。求解

    回复

  7. @Life 2012 年 8 月 7 日

    感谢分享，刚解决了 ie6 闪动问题

    回复

  8. leolai 2012 年 7 月 24 日

    抱歉，把你的页面撑开了

    回复

  9. leolai 2012 年 7 月 24 日

    我把代码写成这样有什么问题没有，请多多指教！
    /* 除了 IE6 的主流浏览器通用的方法支持 position:fixed */
    .fixed-t{position:fixed;bottom:auto;top:0px;}
    .fixed-b{position:fixed;bottom:0px;top:auto;}
    .fixed-l{position:fixed;right:auto;left:0px;}
    .fixed-r{position:fixed;right:0px;left:auto;}
    /*让 position:fixed 在 IE6 下可用! */
    *html{background-image:url(about:blank);background-attachment:fixed;}/*阻止闪动，把空文件换成 about:blank，减少请求 */
    *html .fixed-t{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
    *html .fixed-r{position:absolute;right:auto;left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth);}
    *html .fixed-b{position:absolute;bottom:auto;top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight);}
    *html .fixed-l{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

    回复

  10. 匿名 2012 年 7 月 19 日

    为什么默认的位置是在右下角？

    回复
    • TAT.Kinvix

      TAT.Kinvix 2012 年 7 月 20 日

      因为这是嵌入式 WebQQ 的默认位置，没有改！

      回复

  11. 小白 2012 年 7 月 14 日

    不知都这个会不会出现无限往下拖动的 bug？这样的 bug 怎么解决的呢？

    回复

  12. Terran 2012 年 7 月 10 日

    html{
    _background: expression(document.execCommand(“BackgroundImageCache”, false, true));
    }
    同样解决闪烁？

    回复
    • TAT.Kinvix

      TAT.Kinvix 2012 年 7 月 12 日

      你这个是 ie6 下图片缓存闪烁的解决方法，和 ie6 下 hack 的 position:fixed; 效果的闪动不一样

      回复

  13. huugle 2012 年 7 月 2 日

    用了表达式性能上会不会有问题？ie6 占的份额还是蛮大的。

    回复
    • TAT.Kinvix

      TAT.Kinvix 2012 年 7 月 2 日

      这个经过测试的，不会造成 cpu 性能飙升，qzone 是严禁任何表达式的，但是因为这个表达式经过测试没有性能问题，所以都给放行了！

      回复

      • bigCat 2012 年 7 月 30 日

        Qzone 严禁任何表达式的, 这个也不例外… 采用渐进增强, 首先考虑的是性能 (至少我在的 3 年是这样的) 求更正, 谢谢

        回复
        • TAT.Kinvix

          TAT.Kinvix 2012 年 7 月 30 日

          你说的没错，不过当年是通过了的，确实没有性能问题

          回复

  14. klayer 2012 年 6 月 30 日

    CSS 属性前面加个下划线是什么意思？

    回复

    • huugle 2012 年 7 月 2 日

      ie6 有效

      回复

发表评论