IE6下鼠标切换图片闪烁问题

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

如果为超级链接定义上述的 css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片;而IE6在这里有一个 bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白,令人极度不爽。


一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果差强人意。今天无意中从一个老外的网站上发现了一个比较妥善的解决方案,具体来说就是在页面中加入一段简单的java script脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器了。
document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种:

1.纯css方式,在css中加入如下代码
html {}{
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

2.随便在页面中哪个位置(head、body或者onload)调用上面提及的脚本,例如:
    <script type="text/java script">
        document.execCommand("BackgroundImageCache", false, true);
    </script>

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

最后,总结完整方案:普通、hover状态对应的图片合并成一张,css中通过background-postion控制其位置,页面中加入从缓存读取背景图片的java script脚本。



js也可以写成这样

$(document).ready(function(){
        //ie6 hover切换图片闪动问题
        var isIE6= /msie 6/i.test(navigator.userAgent);
        if (isIE6) {document.execCommand("BackgroundImageCache", false, true);}
 });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值