解决CSS背景图片闪动和重复加载的IE6BUG

标题没能准确的描述清楚问题，CSS背景图片出现闪动是因为这个样式加在了a:link a:hover等属性上。在IE6中表现为：鼠标移上链接再移开便会出现短暂的闪烁，从HttpWatch和Fiddler中很明显的看到这个鼠标动作加载了两次该背景图片，所以更准确的描述是具有链接属性的背景图片在IE6中闪动和重复加载。

 

调用JS的execCommand函数即可实现

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

可以使用js和css expression调用，考虑到改动成本，采用css expression的方式实现。

鼠标在页面上的移动，页面的滚动都会触发css expression去执行，配置较差的机器上会有性能问题。

如果让页面只在载入时运行一次该表达式，产生的影响就微乎其微了。

/*解决背景图片闪动和重复加载的IE6BUG*/
html { zoom: expression(function(ele){ ele.style.zoom = "1" ; document.execCommand( "BackgroundImageCache" , false, true); }(this)); }

将上述样式加入到公用CSS中即可。

 

感谢以下链接的资料提供的帮助

http://ajaxian.com/archives/no-more-ie6-background-flicker

http://kevinpeng.javaeye.com/blog/669264

http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/

http://ued.taobao.com/blog/2010/05/17/ie6-duplicate-load-bug/