武林網(www.49028c.com)文章簡介：改善IE6中a與a:hover的背景支持.

在IE6中背景屬性加a與a:hover兩者的偽類結合，在正常邏輯下為何不起作用？測試這問題存在IE6及以下瀏覽器，這問題我經常遇到在之前一直采用其它方法取而代之，現在找到了另一種解決。

以導航為例，下面的代碼完全符合CSS的邏輯，理論上應該是”a:hove的背景圖片”結合”a.nav_1的背景定位” 而得出預想的結果，但IE6卻異常地只顯示背景圖片而沒有對上背景坐標Demo（請使用IE6與IE6以上瀏覽器作對比）。

*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*導航*/
#nav p{ position:absolute; left:0; bottom:0; width:100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
/*導航經過狀態: IE6及以下瀏覽器不兼容，其它瀏覽器正常*/
#nav a.nav_1{width:80px;background-position:0 -213px;}
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6{width:162px;background-position:-583px -213px;}

之前我使用的解決方案是，再經過狀態添加對應的選擇符。這方法感覺代碼顯得比較臃腫，而對于代碼潔癖的我是比較難接受的Demo。

/*導航經過狀態: 之前的解決方案*/
#nav a.nav_1:hover,
#nav a.nav_1{width:90px;background-position:0 -211px;}
#nav a.nav_2:hover,
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3:hover,
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4:hover,
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5:hover,
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6:hover,
#nav a.nav_6{width:162px;background-position:-583px -213px;}

理論上”a.nav_1″選擇符比”a:hover”要高，但我嘗試添加!important時測試發現IE6卻顯示正常Demo。

而測試其它瀏覽器也無副作用，這次似乎與haslayout無關了，但其產生原因與結果也卻讓人百思不得其解

/*導航經過狀態： 現在的解決方案*/
#nav a.nav_1{width:80px;background-position:0 -211px!important;}
#nav a.nav_2{width:86px;background-position:-80px -213px!important;}
#nav a.nav_3{width:227px;background-position:-166px -213px!important;}
#nav a.nav_4{width:92px;background-position:-393px -213px!important;}
#nav a.nav_5{width:98px;background-position:-485px -213px!important;}
#nav a.nav_6{width:162px;background-position:-514px -213px!important;}

ytzong 提供的解決方法很不錯贊～, 看來不使用背景縮寫還是有它的好處。IE6在背景相加的邏輯上的確是有問題，同樣測試過border屬性則不存在這問題Demo。

*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*導航*/
#nav p{ position:absolute; left:0; top:180px; width:100%;}
#nav p a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav p a:hover{background-image:url(bg.jpg); background-repeat:no-repeat;}
/*導航經過狀態: IE6及以下瀏覽器不兼容，其它瀏覽器正常*/
#nav p a.nav_1{width:80px;background-position:0 -213px;}
#nav p a.nav_2{width:86px;background-position:-80px -213px;}
#nav p a.nav_3{width:227px;background-position:-166px -213px;}
#nav p a.nav_4{width:92px;background-position:-393px -213px;}
#nav p a.nav_5{width:98px;background-position:-485px -213px;}
#nav p a.nav_6{width:162px;background-position:-583px -213px;}

不知道還沒有更好的方法呢～