|
在IE6中背景屬性加 a 與 a:hover 兩者的偽類結(jié)合，在正常邏輯下為何不起作用？測試這問題存在IE6及以下瀏覽器，這問題我經(jīng)常遇到在之前一直采用其它方法取而代之，現(xiàn)在找到了另一種解決。
以導(dǎo)航為例，下面的代碼完全符合CSS的邏輯，理論上應(yīng)該是“a:hove背景圖片”結(jié)合“a.nav_1的背景定位” 而得出預(yù)想的結(jié)果，但I(xiàn)E6卻異常地只顯示背景圖片而沒有對(duì)上背景坐標(biāo) Demo（請使用IE6與IE6以上瀏覽器作對(duì)比）。
*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*導(dǎo)航*/
#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;}
/*導(dǎo)航經(jīng)過狀態(tài): 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;}
之前我使用的解決方案是，再經(jīng)過狀態(tài)添加對(duì)應(yīng)的選擇符。這方法感覺代碼顯得比較臃腫，而對(duì)于代碼潔癖的我是比較難接受的 Demo 。
/*導(dǎo)航經(jīng)過狀態(tài): 之前的解決方案*/
#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時(shí)測試發(fā)現(xiàn)IE6卻顯示正常 Demo 。
而測試其它瀏覽器也無副作用，這次似乎與haslayout無關(guān)了，但其產(chǎn)生原因與結(jié)果也卻讓人百思不得其解
/*導(dǎo)航經(jīng)過狀態(tài)： 現(xiàn)在的解決方案*/
#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 提供的解決方法很不錯(cuò)贊～, 看來不使用背景縮寫還是有它的好處。IE6在背景相加的邏輯上的確是有問題，同樣測試過border屬性則不存在這問題 Demo 。
*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*導(dǎo)航*/
#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;}
/*導(dǎo)航經(jīng)過狀態(tài): 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;}
不知道還沒有更好的方法呢～
原文：http://blog.gulu77.com/?p=628
本文鏈接：http://www.95time.cn/tech/web/2009/7233.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
