如何解决IE6下背景图片闪烁问题-幸凡学习网

如何解决IE6下背景图片闪烁问题

关注我吧

2011/7/2 9:37:37 阅读次数:6921Tags:ie6 背景图片闪烁 execCommand

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

   1. a {}{
   2.   background:url(images/normal.gif);
   3. }
   4. a:hover {}{
   5.   background:url(images/hover.gif);
   6. }

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

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

关于这段脚本的放置方式有两种：
1.纯css方式，在css中加入如下代码

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

2.随便在页面中哪个位置（head、body或者onload）调用上面提及的脚本，例如：

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

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

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