用前景图实现hover切换图片

用前景图实现hover切换图片

现在很多网站都用背景图片来实现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。