解决IE6下背景图片闪烁问题
日期:2009-04-11 阅读:82 分类:HTML~CSS
如果为超级链接定义上述的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脚本。
from:
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脚本。
from:
相关文章
- 修复ie6-position:fixed 2008-12-10
- IE6下图片下方有空隙的解决方法 2008-12-15
- ie6下验证码刷新的bug 2009-03-03
- 微软解释为何力保IE6不消失 2009-08-14
- 解决“引入同一个JS文件IE6报错”的问题 2009-04-30
- Flash Player升级后的背景色问题 2011-10-08
- 给Excel添加背景页码 2011-09-14
- 为WORD文档设置文字背景 2011-09-19
- CSS3伪类:自定义被选中文字的背景色 2011-12-27
- 给img元素设置背景图 2011-11-26