Warum funktioniert die Pseudoklassenkombination aus Hintergrundattribut plus a und a:hover unter normaler Logik in IE6 nicht? Ich habe getestet, dass dieses Problem in IE6 und niedrigeren Browsern besteht. Ich bin oft auf dieses Problem gestoßen und habe andere Methoden verwendet, um es zu ersetzen.
Nehmen Sie die Navigation als Beispiel. Der folgende Code entspricht vollständig der Logik von CSS. Theoretisch sollte er mit „a.nav_1 Hintergrundpositionierung “ kombiniert werden, um das erwartete Ergebnis zu erzielen Normalerweise wird nur das Hintergrundbild angezeigt. Es gibt keine Hintergrundkoordinaten- Demo (bitte verwenden Sie zum Vergleich die Browser IE6 und IE6 oder höher).
*{margin:0;padding:0;}
.header{ Position:relativ; Breite:745px; Hintergrund:url(bg.jpg) no-repeat;}
/*Navigation*/
#nav p{ position:absolute; left: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;}
/*Navigationsstatus: IE6 und niedrigere Browser sind nicht kompatibel, andere Browser sind normal*/
#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;}
Die Lösung, die ich zuvor verwendet habe, bestand darin, den entsprechenden Selektor über den Status hinzuzufügen. Bei dieser Methode wirkt der Code aufgebläht, und als Code-Freak fällt es mir schwer, die Demo zu akzeptieren.
/*Navigationsstatus bestanden: vorherige Lösung*/
#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;}
Theoretisch ist der Selektor „a.nav_1“ höher als „a:hover“, aber als ich versuchte, !important hinzuzufügen, stellte ich fest, dass IE6 den normalen Demo anzeigte.
Beim Testen anderer Browser gibt es keine Nebenwirkungen. Dieses Mal scheint es nichts mit haslayout zu tun zu haben, aber auch die Ursachen und Ergebnisse sind rätselhaft.
/*Navigationsübergabestatus: aktuelle Lösung*/
#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;}
Die von ytzong bereitgestellte Lösung ist sehr gut ~ Es scheint, dass der Verzicht auf Hintergrundabkürzungen immer noch seine Vorteile hat. Es gibt tatsächlich ein Problem mit der Logik der Hintergrundaddition in IE6. Ich habe auch das Border-Attribut getestet und die Demo hat dieses Problem nicht.
*{margin:0;padding:0;}
.header{ Position:relativ; Breite:745px; Hintergrund:url(bg.jpg) no-repeat;}
/*Navigation*/
#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;}
/*Navigationsstatus: IE6 und niedrigere Browser sind nicht kompatibel, andere Browser sind normal*/
#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;}
Ich weiß nicht, ob es einen besseren Weg gibt~