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

  • 相关阅读:
    验证码
    Linux 常用命令
    WTM_LayUI 二级联动
    文件上传漏洞及绕过
    Web For Pentester靶场(xss部分)
    文件上传漏洞fuzz字典生成脚本小工具分享
    两种搭建个人博客方法
    DVWA(xss部分源码分析)
    xss小游戏源码分析
    linux下启动tomcat报错:The BASEDIR environment...
  • 原文地址:https://www.cnblogs.com/leolai/p/2606416.html
Copyright © 2011-2022 走看看