現(xiàn)在很多網(wǎng)站都用背景圖片來實(shí)現(xiàn)hover(鼠標(biāo)經(jīng)過)切換圖片。但是IE有個(gè)該死的bug會(huì)造成超鏈接的背景圖片有時(shí)無法cache,因此在鼠標(biāo)經(jīng)過超鏈接圖片的時(shí)候就看到嘩嘩一大片的http下載請(qǐng)求
。
這不像很多網(wǎng)站上描述的,是由于IE的緩存策略被設(shè)置在“每次訪問此頁時(shí)更新”了造成的,不管IE緩存策略如何設(shè)置,都無法徹底避免這個(gè)問題。
emu試驗(yàn)了一下,發(fā)現(xiàn)用前景圖也可以實(shí)現(xiàn)老甘(他的域名貌似已經(jīng)過期,居然沒續(xù)費(fèi)……)用背景圖實(shí)現(xiàn)的類似效果,不過要多用上一些小技巧:

這不像很多網(wǎng)站上描述的,是由于IE的緩存策略被設(shè)置在“每次訪問此頁時(shí)更新”了造成的,不管IE緩存策略如何設(shè)置,都無法徹底避免這個(gè)問題。
emu試驗(yàn)了一下,發(fā)現(xiàn)用前景圖也可以實(shí)現(xiàn)老甘(他的域名貌似已經(jīng)過期,居然沒續(xù)費(fèi)……)用背景圖實(shí)現(xiàn)的類似效果,不過要多用上一些小技巧:
<!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.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
an icon with text:<A class="file2" href="#"><span><img src="http://www.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></span>test
</A>
</BODY>
</HTML>
<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.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
an icon with text:<A class="file2" href="#"><span><img src="http://www.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></span>test

</BODY>
</HTML>
不用背景圖的一個(gè)代價(jià)就是,再也不能css裸奔了。twinsen一定要講這是個(gè)人品問題了。有的時(shí)候,要對(duì)付IE這樣人品不好的平臺(tái),犧牲一點(diǎn)人品來換取一點(diǎn)性能上的優(yōu)化,并不是不值得考慮的吧?
在Firefox下面比較郁悶,必須要display:block才能實(shí)現(xiàn)overflow的效果,試了下display:table等table族的樣式,都沒有辦法真正的overflow。