IE6背景图片缓存bug解决方法 - boral_li的专栏

IE6背景图片缓存bug解决方法收藏

    背景图片缓存bug是IE6众多常见bug之一，在CSS中定义DOM元素的背景图片，当元素处于静止状态时，此bug不易被发现，但当使用事件触发脚本动态改变元素的背景图片时，背景图片会出现闪烁的现象，如：

view plaincopy to clipboardprint?

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

 

当鼠标滑过时，背景图片会出现闪烁。导致该问题的原因在于IE6在每次加载CSS样式的时候都从服务器获取图片，只要告知浏览器第一次从服务器加载图片以后就从缓存中加载图片即可。

   解决办法：

   方法一：使用Javascript脚本

 

view plaincopy to clipboardprint?

1. <!--[if IE 6]>  
2. <script type="text/javascript"><!--  
3. document.execCommand("BackgroundImageCache", false, true);  
4. // --></script>  
5. <![endif]-->  

 

   只要在页面加载时或页面加载后执行以上方法即可！

方法二：使用CSS表达式

  

view plaincopy to clipboardprint?

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

 

注：CSS表达式仅IE支持，不过此bug也只有IE6存在！

    以上任意一种方法均可解决此问题，由于document.execCommand是针对浏览器的命令，所以当在某个页面执行后，其所有的子窗口页面均不再存在此问题，所以不用在每个页面上都执行一次！