完美解决IE6下position:fixed的Bug;以及闪动问题
废话少说,先上代码:
/* 除了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-(parseInt(this.currentStyle.marginLeft)||0)-(parseInt(this.currentStyle.marginRight)||0));} *html .fixed_b{position:absolute;bottom:auto;top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0));} *html .fixed_l{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
这段代码考虑到了fixed元素的margin,分别组合定位在浏览器视口的四个角,缺点是代码过长且使用了css表达式,可能会造成部分性能问题。
以上代码可根据项目需要适当精简,比如我们一般都是在右下角定位一个小窗口,可精简成如下:
html代码:
<div class="fixed_r_b" style="width:200px;height:200px;border:1px solid black;overflow:hidden;"> <h1>窗口标题</h1> <p>内容</p> </div>
css代码(在这里不考虑边距问题):
*html{background-image:url(about:blank);background-attachment:fixed;} .fixed_r_b{position:fixed;bottom:0;right:0;} *html .fixed_r_b{ position:absolute; top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight); left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth); }
虽然用到了css表达式,但也是没有办法中的办法了,如果读者有更好的办法,麻烦共享一下,哈哈~