zoukankan      html  css  js  c++  java
  • 终结IE6下背景图片闪烁问题

    {
      background
    :url(images/normal.gif);
    }

    a:hover 
    {
      background
    :url(images/hover.gif);
    }

    如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片;而IE6在这里有一个bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白,令人极度不爽。


    一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果差强人意。今天无意中从一个老外的网站上发现了一个比较妥善的解决方案,具体来说就是在页面中加入一段简单的javascript脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器了。

    document.execCommand("BackgroundImageCache",false,true);

    关于这段脚本的放置方式有两种:

    1.纯css方式,在css中加入如下代码

    html {
        filter
    : expression(document.execCommand("BackgroundImageCache", false, true));
    }

    2.随便在页面中哪个位置(head、body或者onload)调用上面提及的脚本,例如:

        <script type="text/javascript">
            document.execCommand(
    "BackgroundImageCache"falsetrue);
        
    </script>

    鉴于expression严重影响浏览器效率,建议采用第二种方式。

    最后,总结完整方案:普通、hover状态对应的图片合并成一张,css中通过background-postion控制其位置,页面中加入从缓存读取背景图片的javascript脚本。

    附英文地址 http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker

  • 相关阅读:
    centos7上以RPM方式安装MySQL5.6
    区别和详解:jQuery extend()和jQuery.fn.extend()
    jQuery笔记总结
    CSS Hack的一些知识
    12种不宜使用的javascript的语法
    64位Win7系统下vs2010调试无法连接oracle解决办法
    HashCode()与equals()深入理解
    Java ArrayList自动扩容机制
    Java基础知识
    MySQL的MVCC机制
  • 原文地址:https://www.cnblogs.com/jenry/p/1078796.html
Copyright © 2011-2022 走看看