五行代码终极完美解决从 IE6 到 Chrome 所有浏览器的 position:fixed; 以及闪动问题

In 未分类 on 2012年06月29日 by TAT.Kinvix view: 17,644

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

分享到:

千墨 2015 年 2 月 2 日

用 expression 的不能算办法吧= =

回复
intellectual 2013 年 7 月 26 日

没有帮助

回复
Marker 2012 年 10 月 30 日

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

回复
Acos 2012 年 10 月 27 日

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

回复
- TAT.Kinvix 2012 年 10 月 27 日
  
  你说的是哪种方法？代码量是多少？
  
  回复
完美解决IE6等所有浏览器的position:fixed;以及闪动问题 | 米皮 2012 年 9 月 17 日

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

回复
ad 2012 年 8 月 28 日

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

回复
@Life 2012 年 8 月 7 日

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

回复
leolai 2012 年 7 月 24 日

抱歉，把你的页面撑开了

回复
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));}

回复
匿名 2012 年 7 月 19 日

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

回复
- TAT.Kinvix 2012 年 7 月 20 日
  
  因为这是嵌入式 WebQQ 的默认位置，没有改！
  
  回复
小白 2012 年 7 月 14 日

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

回复
Terran 2012 年 7 月 10 日

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

回复
- TAT.Kinvix 2012 年 7 月 12 日
  
  你这个是 ie6 下图片缓存闪烁的解决方法，和 ie6 下 hack 的 position:fixed; 效果的闪动不一样
  
  回复
huugle 2012 年 7 月 2 日

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

回复
- TAT.Kinvix 2012 年 7 月 2 日
  
  这个经过测试的，不会造成 cpu 性能飙升，qzone 是严禁任何表达式的，但是因为这个表达式经过测试没有性能问题，所以都给放行了！
  
  回复
  - bigCat 2012 年 7 月 30 日
    
    Qzone 严禁任何表达式的, 这个也不例外… 采用渐进增强, 首先考虑的是性能 (至少我在的 3 年是这样的) 求更正, 谢谢
    
    回复
    - TAT.Kinvix 2012 年 7 月 30 日
      
      你说的没错，不过当年是通过了的，确实没有性能问题
      
      回复
klayer 2012 年 6 月 30 日

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

回复
- huugle 2012 年 7 月 2 日
  
  ie6 有效
  
  回复
五行代码完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题 « Dave Liang {q} 2012 年 6 月 29 日

[…] 转自： AlloyTeam […]

回复