关注前端开发微信微信号web007007

链接伪类hover的CSS背景图片闪烁BUG

作者 管理员 发布时间 2012-06-30 13:16 文章分类 站长杂谈 文章评论 抢沙发 阅读次数

我们在网站的设计过程中几乎都会用到:hover这个CSS伪类去完成我们想要达到的效果。但是:hover伪类并不是一个非常听话的孩子,它在IE6中经常会出现这样那样的问题。比如CSS背景图片闪烁;只能针对A链接;访问后:hover样式消失的问题(详细内容可以查看我的另一篇文章:《超链接访问后hover样式消失的解决办法》),苛刻的浏览器兼容条件等。
而我们今天主要讲的就是伪类:hover的CSS背景图片的闪烁问题。
在IE6,当我们添加为a元素添加了:hover伪类之后,如果CSS在样式中存在background属性,那么当我们划过hover的时候就会出现短暂的背景图片闪烁,具体的原因是IE6会再一次请求这张图片,或者说图片没被IE6缓存。
首先来看一个例子:

<a href="http://www.web92.net" target="_blank" title="WEB前端开发网">WEB前端开发网</a>
a:hover {aaa.jpg) no-repeat;}

当你点击到a的时候,52maomao.jpg就会出现短暂的闪烁。
具体的解决办法就是在页面底部添加IE6的条件注释,让IE6缓存CSS背景图片至本地,这样a:hover划过时IE6就不会再重新向服务器请求加载背景图片了。
代码如下:

<!–[if IE 6]>
<script type=”text/javascript”>
document.execCommand(”BackgroundImageCache”, false, true);
</script>
<![endif]–>

或者

<!–[if IE 6]>
<script type=text/javascript>
try {
document.execCommand(“BackgroundImageCache”, false, true);
} catch(err) {}
</script>
<![endif]–>

以上两种方法都可以很好的解决IE6:hover的CSS背景图片闪烁的BUG,但是都是使用的Javascript代码,我正在寻求能否使用其他HTML或者是CSS的办法去解决它。如果有,我会在之后的内容中去更新它。
另外不的不说一句的是使用:hover你可以完成非常炫丽的效果。

本文固定链接: http://www.web92.net/517.html | WEB前端开发

该日志由 于2012年06月30日发表在 站长杂谈 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 链接伪类hover的CSS背景图片闪烁BUG | WEB前端开发