完美解决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表达式,但也是没有办法中的办法了,如果读者有更好的办法,麻烦共享一下,哈哈~

posted @ 2012-07-24 14:14  无赖君子  阅读(1433)  评论(0编辑  收藏  举报