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

  • 相关阅读:
    swagger本地环境搭建
    上传图片报错
    接口自动化测试---环境搭建
    IDEA 运行程序提交hdfs时,报错
    hadoop2.60集群搭建
    查找排除当前最大、最小salary之后的员工的平均工资avg_salary。
    按照salary的累计和running_total,其中running_total为前两个员工的salary累计和
    CSS补充
    BFC(块级格式化上下文)
    CSS精灵技术
  • 原文地址:https://www.cnblogs.com/leolai/p/2606416.html
Copyright © 2020-2023  润新知