zoukankan      html  css  js  c++  java
  • CSS,实现IE6固定定位及解决"抖动"的原理

      虽然现在网上有许多用JS或JQ封装的函数,用于实现的兼容IE6的固定定位,但似乎有点大材小用,其实可以用CSS的expression解决:

    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop));

      如上设置后会出现一个问题,固定的元素背景在滑动会抖动,解决方案:

    * html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }

    完整的CSS代码:

    * html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }
    #nav{
        position:fixed;
        top:0;
        left:0;
        _position:absolute;
        _top:expression(eval(document.documentElement.scrollTop));
    }

     需要注意的是:
      *html{ background-image:url(about:blank);background-attachment:fixed;}

    由于IE的一个多步渲染进程。当滚动或调整浏览器大小时,该进程将重置所有内容重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上页面的滚动,于是就会“跳动”。

    解决办法就是使用background-attachment:fixed为body或html元素添加一个background-image。
      这会强制页面在重画之前先处理CSS。
    因为是在重画之前处理CSS,故在重画之前首先处理你定义的CSS表达式。从而实现完美的平滑固定!

    无需一个真实的图片!你可以使用一个about:blank替代一个spacer.gif图片,而且它工作的同样出色。

  • 相关阅读:
    POJ
    POJ
    hdu 1569 &1565 (二分图带权最大独立集
    ZOJ
    POJ
    python-socket作业
    ACM-ICPC 2018 焦作赛区网络预赛 F. Modular Production Line (区间K覆盖-最小费用流)
    ACM-ICPC 2018 焦作赛区网络预赛 E. Jiu Yuan Wants to Eat (树链剖分-线性变换线段树)
    POJ 2987
    ACM-ICPC 2018 南京赛区网络预赛 G. Lpl and Energy-saving Lamps (弱线段树)
  • 原文地址:https://www.cnblogs.com/slowsoul/p/3110135.html
Copyright © 2011-2022 走看看