用前景图实现hover切换图片

最新推荐文章于 2022-05-10 18:30:52 发布

最新推荐文章于 2022-05-10 18:30:52 发布 · 113 阅读

文章标签：

#IE #.net #Firefox #CSS #Cache

探讨了IE浏览器中背景图片缓存问题及其对用户体验的影响。通过使用前景图片及特定CSS技巧提供了解决方案，同时对比了Firefox浏览器的表现。

现在很多网站都用背景图片来实现hover（鼠标经过）切换图片。但是IE有个该死的bug会造成超链接的背景图片有时无法cache，因此在鼠标经过超链接图片的时候就看到哗哗一大片的http下载请求

。

这不像很多网站上描述的，是由于IE的缓存策略被设置在“每次访问此页时更新”了造成的，不管IE缓存策略如何设置，都无法彻底避免这个问题。

emu试验了一下，发现用前景图也可以实现老甘（他的域名貌似已经过期，居然没续费……）用背景图实现的类似效果，不过要多用上一些小技巧：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<style>
A.file{overflow:hidden;height:20px;width:20px;}
A.fileIMG{position:relative;left:-130px;top:-350px}
A.file:hover{emu:expression(0)}
A.file:hoverIMG{left:-10px;top:-350px}

A.file2{text-decoration:none;color:gray}
A.file2span{overflow:hidden;height:20px;width:20px;}
A.file2spanIMG{position:relative;left:-130px;top:-348px}
A.file2:hover{color:red;height:20}
A.file2:hoverspanIMG{left:-10px;top:-348px}
</style>
</HEAD>
<BODY>
onesingleicon:<Aclass="file"href="#"><imgsrc="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
aniconwithtext:<Aclass="file2"href="#"><span><imgsrc="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></span>test