IE6下背景图片闪烁问题

如果为超级链接定义上述的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 " ,  false ,  true );
     </ script >

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

 

如果一定要使用 CSS，也是可以滴

body{
    zoom: expression(function(ele){
    document.execCommand('BackgroundImageCache', false, true);
    ele.style.zoom = '1';
    }(this));
}

这里用 zoom 触发，搞定之后把 zoom 写回 1（好像我很喜欢捣腾 zoom），这下就没效率问题了吧，嘿嘿。同理，其他针对 IE 的 hack，如果是只跑一次的 expression，其实都可以这样做，所谓兔死狗烹过河拆桥是也～ :D。