现在很多网站都用背景图片来实现hover(鼠标经过)切换图片。但是IE有个该死的bug会造成超链接的背景图片有时无法cache,因此在鼠标经过超链接图片的时候就看到哗哗一大片的http下载请求
。
这不像很多网站上描述的,是由于IE的缓存策略被设置在“每次访问此页时更新”了造成的,不管IE缓存策略如何设置,都无法彻底避免这个问题。
emu试验了一下,发现用前景图也可以实现老甘(他的域名貌似已经过期,居然没续费……)用背景图实现的类似效果,不过要多用上一些小技巧:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
A.file{overflow:hidden;height:20px;width:20px;}
A.file IMG{position:relative;left:-130px;top:-350px}
A.file:hover{emu:expression(0)}
A.file:hover IMG{left:-10px;top:-350px}
A.file2 {text-decoration:none;color:gray}
A.file2 span{overflow:hidden;height:20px;width:20px;}
A.file2 span IMG{position:relative;left:-130px;top:-348px}
A.file2:hover{color:red;height:20}
A.file2:hover span IMG{left:-10px;top:-348px}
</style>
</HEAD>
<BODY>
one single icon : <A class="file" href="#"><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
an icon with text:<A class="file2" href="#"><span><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></span>test</A>
</BODY>
</HTML>
不用背景图的一个代价就是,再也不能css裸奔了。twinsen一定要讲这是个人品问题了。有的时候,要对付IE这样人品不好的平台,牺牲一点人品来换取一点性能上的优化,并不是不值得考虑的吧?
在Firefox下面比较郁闷,必须要display:block才能实现overflow的效果,试了下display:table等table族的样式,都没有办法真正的overflow。