¿Por qué la combinación de pseudoclase del atributo de fondo más a y a:hover no funciona bajo la lógica normal en IE6? Probé que este problema existe en los navegadores IE6 y siguientes. A menudo encontré este problema y utilicé otros métodos para reemplazarlo. Ahora encontré otra solución.
Tome la navegación como ejemplo. El siguiente código está completamente en línea con la lógica de CSS. En teoría, debería combinarse con " a:hove background image " y "a.nav_1 background positioning" para obtener el resultado esperado. De forma anormal, solo muestra la imagen de fondo. No hay demostración de coordenadas de fondo (utilice los navegadores IE6 e IE6 o superiores para comparar).
*{margen:0;relleno:0;}
.encabezado{ posición:relativa; ancho:745px; alto:225px; fondo:url(bg.jpg) sin repetición;}
/*navegación*/
#nav p{ posición:absoluta; izquierda:0; abajo:0; ancho:100%;}
#navegar a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{fondo:url(bg.jpg) sin repetición 0 0;}
/*Estado de navegación: los navegadores IE6 e inferiores no son compatibles, otros navegadores son normales*/
#nav a.nav_1{ancho:80px;posición-fondo:0 -213px;}
#nav a.nav_2{ancho:86px;posición-fondo:-80px -213px;}
#nav a.nav_3{ancho:227px;posición-fondo:-166px -213px;}
#nav a.nav_4{ancho:92px;posición-fondo:-393px -213px;}
#nav a.nav_5{ancho:98px;posición-fondo:-485px -213px;}
#nav a.nav_6{ancho:162px;posición-fondo:-583px -213px;}
La solución que usé antes fue agregar el selector correspondiente a través del estado. Este método siente que el código parece inflado y, como fanático del código, me resulta difícil aceptar la demostración .
/*Estado de paso de navegación: solución anterior*/
#nav a.nav_1: flotar,
#nav a.nav_1{ancho:90px;posición-fondo:0 -211px;}
#nav a.nav_2: flotar,
#nav a.nav_2{ancho:86px;posición-fondo:-80px -213px;}
#nav a.nav_3: flotar,
#nav a.nav_3{ancho:227px;posición-fondo:-166px -213px;}
#nav a.nav_4: flotar,
#nav a.nav_4{ancho:92px;posición-fondo:-393px -213px;}
#nav a.nav_5: flotar,
#nav a.nav_5{ancho:98px;posición-fondo:-485px -213px;}
#nav a.nav_6: flotar,
#nav a.nav_6{ancho:162px;posición-fondo:-583px -213px;}
En teoría, el selector "a.nav_1" es más alto que "a:hover", pero cuando intenté agregar! Importante, descubrí que IE6 mostraba la demostración normal.
No hay efectos secundarios al probar otros navegadores. Esta vez parece no tener nada que ver con haslayout, pero sus causas y resultados también son desconcertantes.
/*Estado de paso de navegación: solución actual*/
#nav a.nav_1{ancho:80px;posición-fondo:0 -211px!importante;}
#nav a.nav_2{ancho:86px;posición-fondo:-80px -213px!importante;}
#nav a.nav_3{ancho:227px;posición-fondo:-166px -213px!importante;}
#nav a.nav_4{ancho:92px;posición-fondo:-393px -213px!importante;}
#nav a.nav_5{ancho:98px;posición-fondo:-485px -213px!importante;}
#nav a.nav_6{ancho:162px;posición-fondo:-514px -213px!importante;}
La solución proporcionada por Ytzong es muy buena ~ Parece que no utilizar abreviaturas en segundo plano todavía tiene sus ventajas. De hecho, hay un problema con la lógica de adición de fondo en IE6. También probé el atributo de borde y la demostración no tiene este problema.
*{margen:0;relleno:0;}
.encabezado{ posición:relativa; ancho:745px; alto:225px; fondo:url(bg.jpg) sin repetición;}
/*navegación*/
#nav p{ posición:absoluta; izquierda:0; arriba:180px;
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{imagen de fondo:url(bg.jpg); repetición de fondo:no-repetir;}
/*Estado de navegación: los navegadores IE6 e inferiores no son compatibles, otros navegadores son normales*/
#nav p a.nav_1{ancho:80px;posición-fondo:0 -213px;}
#nav p a.nav_2{ancho:86px;posición-fondo:-80px -213px;}
#nav p a.nav_3{ancho:227px;posición-fondo:-166px -213px;}
#nav p a.nav_4{ancho:92px;posición-fondo:-393px -213px;}
#nav p a.nav_5{ancho:98px;posición-fondo:-485px -213px;}
#nav p a.nav_6{ancho:162px;posición-fondo:-583px -213px;}
No sé si hay una mejor manera ~