CSS: Problemas comuns com internet explorer 6 e como resolvê-los

Você faz o seu layout com todo cuidado, escreve o html totalmente web standards compliant e faz o CSS bem estruturado. Arruma cada detalhe e confere cada mudança no firefox e internet explorer 7. Pronto. Terminou. Perfeito. Agora só falta testar no internet explorer 6. Nooossa!…. Está tudo errado. Maldito ie6!!!

Acho que todo mundo já passou por isso algum dia e provavelmente ainda vai continuar passando, pois mesmo com ie7, firefox e chrome ainda tem muita gente usando ie6.

Por isso aqui vão algumas dicas para resolver os problemas mais comuns com o velho navegador da Microsoft.

“A minha div está com a margem maior [duplicada]!”

Esse é um dos bugs mais comuns. Quando um elemento usa float:left e tem uma margem esquerda [margin-left] o internet explorer 6, sabe-se lá por quê, duplica o valor desta margem.
Solução:
Basta adicionar um display:inline na div ou em outro elemento que apresente esse problema.

“Tenho uma div com 100% de altura [height:100%] mas não está funcionando.”

Quando você tem uma div com 100% de altura dentro de outro elemento sem altura definida o internet explorer 6 não ‘entende’ e exibe o layout de maneira errada.
Como resolver:
Defina uma altura fixa para o elemento que contém a sua div.

“Minhas imagens PNG estão sem transparência”

É. IE6 não renderiza corretamente PNGs com transparência, o que torna seu uso um pouco arriscado, mas não impossível.
Solução:
Existe um patch quase desconhecido lançado pela Microsoft que corrige este problema, adicione ao seu CSS:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);

“O Layout tem duas [3, 4] colunas com float:left mas uma delas sempre “cai” pra baixo da outra ao invés de ficar ao lado”

Isso também é comum, e pode ter dois motivos. Primeiro: se a sua coluna tem margin-left, o internet explorer 6 pode estar duplicando a margem então o espaço restante acaba sendo insuficiente e a sua coluna “cai”. Segundo: mesmo que a sua coluna tenha uma largura definida, se houver qualquer elemento com largura maior dentro dela, o internet explorer 6 irá expandí-la.
Como resolver:
Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.
Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna.

“Meus itens de lista estão com o marcador desalinhado”

Provavelmente você está usando padding-top no seu <li>.O ie6 não lida muito bem com paddings.
Solução:
Troque o padding-top por margin-top.

E o gran finale:

“O ie6 está duplicando o final da minha última <li>, ou do meu último parágrafo!”

Esse bug é chato. Muito chato. Acontece por que o ie6 sempre “duplica o final do conteúdo do último elemento de uma série elementos com float:left que tenham comentários entre eles”. Acredite ou não, é isso.
Como resolver:
Primeiro, tente retirar todos os comentários entre estes elementos. Se não for possível, coloque float:none nestes elementos e trabalhe com largura, altura e position para posicioná-los corretamente

Espero que ajude.

Veja também : CSS hacks - ie6, ie7, firefox