Pourquoi la combinaison de pseudo-classe de l'attribut d'arrière-plan plus a et a:hover ne fonctionne-t-elle pas sous la logique normale dans IE6 ? J'ai testé que ce problème existe dans les navigateurs IE6 et inférieurs. J'ai souvent rencontré ce problème et j'ai utilisé d'autres méthodes pour le remplacer. J'ai maintenant trouvé une autre solution.
Prenons l'exemple de la navigation. Le code suivant est tout à fait conforme à la logique du CSS. En théorie, il devrait s'agir de " a:hove background image " combiné avec " a.nav_1 background positionnement " pour obtenir le résultat attendu. affiche anormalement uniquement l'image d'arrière-plan. Il n'y a pas de démo de coordonnées d'arrière-plan (veuillez utiliser les navigateurs IE6 et IE6 ou supérieurs pour comparaison).
*{marge:0;padding:0;}
.header{ position:relative; largeur:745px; hauteur:225px;
/*navigation*/
#nav p{ position : absolue ; gauche : 0 ; bas : 0 ; largeur : 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;}
/*État de navigation : les navigateurs IE6 et inférieurs ne sont pas compatibles, les autres navigateurs sont normaux*/
#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;}
La solution que j'ai utilisée auparavant consistait à ajouter le sélecteur correspondant via l'état. Cette méthode donne l'impression que le code semble gonflé, et en tant que mordu du code, il m'est difficile d'accepter la démo .
/*Statut de réussite de la navigation : solution précédente*/
#nav a.nav_1:survolez,
#nav a.nav_1{width:90px;background-position:0 -211px;}
#nav a.nav_2:survolez,
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3:survolez,
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4:survolez,
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5:survolez,
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6:survolez,
#nav a.nav_6{width:162px;background-position:-583px -213px;}
Théoriquement, le sélecteur "a.nav_1" est supérieur à "a:hover", mais lorsque j'ai essayé d'ajouter !important, j'ai constaté qu'IE6 affichait le Demo normal.
Il n'y a aucun effet secondaire lors du test d'autres navigateurs. Cette fois, cela ne semble rien avoir à voir avec haslayout, mais ses causes et ses résultats sont également déroutants.
/*Statut de réussite de la navigation : solution actuelle*/
#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;}
La solution fournie par ytzong est très bonne ~ Il semble que ne pas utiliser d'abréviations d'arrière-plan ait toujours ses avantages. Il y a effectivement un problème avec la logique d'ajout d'arrière-plan dans IE6. J'ai également testé l'attribut border et la Démo n'a pas ce problème.
*{marge:0;padding:0;}
.header{ position:relative; largeur:745px; hauteur:225px;
/*navigation*/
#nav p{ position : absolue ; gauche : 0 ; haut : 180 px largeur : 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;}
/*État de navigation : les navigateurs IE6 et inférieurs ne sont pas compatibles, les autres navigateurs sont normaux*/
#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;}
Je ne sais pas s'il existe une meilleure façon ~