用前景图实现hover切换图片

现在很多网站都用背景图片来实现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: < A class ="file" href ="#" >< img src ="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif" ></ A > . < BR >
aniconwithtext: < 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。