Quando se trata do mecanismo de processamento de CSS, o IE sempre tem muitas coisas que fazem as pessoas vomitarem sangue, mas ainda estão felizes com as melhorias atuais.
Tomemos como exemplo o suporte para pseudo-class:hover. O IE7+ finalmente adicionou suporte para tags diferentes de a. É claro que devemos aplaudir essas melhorias, mas no IE6, o suporte do :hover para a não é tão satisfatório. O seguinte é um problema sobre o qual quero falar brevemente: passar o mouse no IE6 e em navegadores anteriores.
Muitas pessoas já devem conhecer alguns problemas com :hover no IE6 e em navegadores anteriores (doravante denominados IE6-). Quero falar principalmente sobre questões como:hover span{}.
Às vezes, para adicionar alguns efeitos dinâmicos simples, costumamos usar :hover para ajudar. Por exemplo, costumamos mudar a cor do texto quando o mouse passa sobre um link. como:
Sim, isso funcionará em todos os navegadores. Mas se você mudar para isto:
Você descobrirá que nada acontece no IE6-, nossos estilos são inválidos. Sim, é isso. Muitas pessoas deveriam ter encontrado esse problema e resolvido.
Sim, você só precisa adicionar outro estilo a:hover{} para resolver esse problema, que pode conter zoom, preenchimento, margem e outros atributos. do seguinte modo:
Vendo que o efeito normal foi restaurado, pensei no que poderia ter causado a falha do :hover. Você pode usar zoom, exibição, preenchimento e outros atributos para fazer isso, então pensei que poderia ser por causa do haslayout. Bem, provavelmente é esse o caso. Mas se você continuar testando, descobrirá que não importa quais atributos você escreve em a:hover{}, como cor, tamanho da fonte, overflow (mesmo atributos que não existem, como xx:yyy), você pode restaure-o normalmente.
Você se sente um pouco atordoado depois de testá-lo aqui? Sim, eu também sou assim. Quanto ao motivo ainda não sei, talvez alguém saiba.
a:hover{zoom:1;}
a: passe o mouse sobre{cor:#F00;}
<a href="?">Alterar minha <em>cor</em></a> ao passar o mouse
a: passe o mouse sobre{cor:#F00;}
<a href="?">Alterar minha <em>cor</em></a> ao passar o mouse
a:hover{cor:#F00;}
<a href="?">Mudar minha cor ao passar o mouse</a>