Existem muitos artigos excelentes no exterior com os quais você pode aprender, então decidi passar algum tempo traduzindo-os. Não sei se alguém traduziu este artigo. O nome original é 10 Awful IE Bugs and Fixes . Espero que mais pessoas possam ler esses excelentes artigos. Os estrangeiros são muito bem-humorados, então li o texto inteiro. Especialistas fazem um desvio
A seguir está a tradução :
Listei 10 bugs comuns do IE e suas soluções. Acredito que isso ajudará você a reduzir o tempo gasto na depuração de inconsistências de layout no IE.
Autor: Kevin
Introdução
Todo mundo tem sua própria história quando se trata de lidar com o IE. Como desenvolvedor, tenho que lidar com muitas peculiaridades do IE e às vezes você só quer bater a cabeça na parede. Mas com o tempo, aprendemos muito (às vezes não foi culpa nossa, foi culpa do IE!) e começamos a aceitar e compreender o comportamento estranho do IE. Temos que fazer isso porque ainda há um número significativo de usuários do IE6. A melhor coisa a fazer é testar constantemente o seu site em diferentes navegadores desde o início. É muito mais fácil resolver problemas de layout desde o início do que depois de milhares de linhas de código HTML e CSS.
Há muito movimento protestando contra o IE6, apoiado pela maioria de especialistas em web e usuários comuns que não parecem se importar muito. Então, o que podemos fazer agora? Tivemos que continuar pesquisando para resolver o problema com o IE6. Mas espere, há notícias emocionantes. Com base no relatório mensal da w3cschool, o número de usuários do IE6 diminuiu ao longo dos anos. De 60,3% em junho de 2006 para 13,6% em setembro de 2009. De acordo com esta proporção, deveremos ser capazes de abandonar o IE6 até o final de 2010 (Anotação: A situação no exterior é muito boa ~.~)
Ok, de volta à realidade, fiz uma lista de todos os problemas que encontrei antes para referência futura. Acredito que isso ajudará você a reduzir o tempo gasto na depuração de inconsistências de layout no IE.
1. Texto fantasma do IE6 (bug do texto fantasma)
Antes de escrever este artigo, encontrei esse bug. É muito estranho e engraçado. Um pedaço de texto duplicado que surge do nada é exibido próximo ao texto original pelo IE6. (Anotação: você também pode consultar Bug de caracteres duplicados do Explorer 6 para obter uma demonstração de bug). Não consegui consertar, então procurei e, com certeza, é outro bug do IE6.
Existem muitas soluções alternativas para isso, mas nenhuma delas funcionou no meu exemplo (não pude usar algumas delas devido à complexidade do site). Então eu usei um hack. Adicionar espaços após o texto original parece resolver o problema.
No entanto, aprendi no Hippy Tech Blog que a razão por trás do problema é devido às tags de comentários HTML. O IE6 não consegue renderizá-lo corretamente. Aqui está uma lista de suas soluções sugeridas:
Solução :
2. Posição relativa e estouro oculto
Encontrei esse problema muitas vezes quando estava preparando um tutorial sobre JQuery porque usei muito overflow oculto para conseguir o layout que queria.
O problema ocorre quando o estouro do elemento pai é definido como oculto e o elemento filho é definido como posição: relativo.
CSS-Trick tem um ótimo exemplo demonstrando esse bug. posição: relativa e estouro no Internet Explorer
Solução :
Adicione position:relative ao elemento pai;
3. Altura mínima para IE
É simples, o IE ignora o atributo min-height. Você pode usar o hack abaixo para consertar. Obrigado a Dustin Diaz .
Esta solução funciona bem no IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2.
Solução :
seletor {
altura mínima: 500px;
altura:auto !importante;
altura:500px;
}