这个方法其实已经使用很久了,之前主要在嵌入式 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/

  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 有效

发表评论