Por que a combinação de pseudoclasse do atributo background mais a e a:hover não funciona sob lógica normal no IE6? Testei que esse problema existe no IE6 e em navegadores anteriores. Muitas vezes encontrei esse problema e usei outros métodos para substituí-lo.
Tomemos a navegação como exemplo. O código a seguir está totalmente alinhado com a lógica do CSS. Em teoria, deveria ser " a:hove background image " combinado com "a.nav_1 background positions" para obter o resultado esperado. anormalmente exibe apenas a imagem de fundo. Não há demonstração de coordenadas de fundo (use navegadores IE6 e IE6 ou superiores para comparação).
*{margem:0;preenchimento:0;}
.header{ posição:relativa largura:745px; altura:225px;
/*navegação*/
#nav p{posição:absoluta;esquerda:0;largura: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;}
/*Status de navegação: navegadores IE6 e anteriores não são compatíveis, outros navegadores são normais*/
#nav a.nav_1{largura:80px;posição de fundo:0 -213px;}
#nav a.nav_2{largura:86px;posição de fundo:-80px -213px;}
#nav a.nav_3{largura:227px;posição de fundo:-166px -213px;}
#nav a.nav_4{largura:92px;posição de fundo:-393px -213px;}
#nav a.nav_5{largura:98px;posição de fundo:-485px -213px;}
#nav a.nav_6{largura:162px;posição de fundo:-583px -213px;}
A solução que usei antes foi adicionar o seletor correspondente através do estado. Esse método parece que o código parece inchado e, como um fanático por código, é difícil para mim aceitar a demonstração .
/*Status de passagem de navegação: solução anterior*/
#nav a.nav_1: passar o mouse,
#nav a.nav_1{largura:90px;posição de fundo:0 -211px;}
#nav a.nav_2: passar o mouse,
#nav a.nav_2{largura:86px;posição de fundo:-80px -213px;}
#nav a.nav_3: passar o mouse,
#nav a.nav_3{largura:227px;posição de fundo:-166px -213px;}
#nav a.nav_4: passar o mouse,
#nav a.nav_4{largura:92px;posição de fundo:-393px -213px;}
#nav a.nav_5: passar o mouse,
#nav a.nav_5{largura:98px;posição de fundo:-485px -213px;}
#nav a.nav_6: passar o mouse,
#nav a.nav_6{largura:162px;posição de fundo:-583px -213px;}
Teoricamente, o seletor "a.nav_1" é maior que "a:hover", mas quando tentei adicionar !important, descobri que o IE6 exibia o Demo normal.
Não há efeitos colaterais ao testar outros navegadores. Desta vez, parece não ter nada a ver com haslayout, mas suas causas e resultados também são intrigantes.
/*Status de passagem de navegação: solução atual*/
#nav a.nav_1{largura:80px;posição de fundo:0 -211px!importante;}
#nav a.nav_2{largura:86px;posição de fundo:-80px -213px!importante;}
#nav a.nav_3{largura:227px;posição de fundo:-166px -213px!importante;}
#nav a.nav_4{largura:92px;posição de fundo:-393px -213px!importante;}
#nav a.nav_5{largura:98px;posição de fundo:-485px -213px!importante;}
#nav a.nav_6{largura:162px;posição de fundo:-514px -213px!importante;}
A solução fornecida por ytzong é muito boa ~ Parece que não usar abreviações de fundo ainda tem suas vantagens. De fato há um problema com a lógica de adição de fundo no IE6. Também testei o atributo border e o Demo não apresenta esse problema.
*{margem:0;preenchimento:0;}
.header{ posição:relativa largura:745px; altura:225px;
/*navegação*/
#nav p{ posição:absoluta esquerda:0; topo:180px largura:100%;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{imagem de fundo:url(bg.jpg); repetição de fundo:no-repeat;}
/*Status de navegação: navegadores IE6 e anteriores não são compatíveis, outros navegadores são normais*/
#nav p a.nav_1{largura:80px;posição de fundo:0 -213px;}
#nav p a.nav_2{largura:86px;posição de fundo:-80px -213px;}
#nav p a.nav_3{largura:227px;posição de fundo:-166px -213px;}
#nav p a.nav_4{largura:92px;posição de fundo:-393px -213px;}
#nav p a.nav_5{largura:98px;posição de fundo:-485px -213px;}
#nav p a.nav_6{largura:162px;posição de fundo:-583px -213px;}
Não sei se existe uma maneira melhor ~