在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 pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa: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;}
不知道還沒有更好的方法呢～