CSS Hacks - IE6, IE7, Firefox

Infelizmente ainda tem muita gente usando Internet Explorer 6 por aí.
Nos grandes portais brasileiros, segundo as últimas pesquisas, esse número chega a perturbantes 40% dos usuários. Ou seja, o seu site precisa ser exibido corretamente no IE6. E seria fácil se o IE7 renderizasse o htm da mesma maneira, assim você faria seu código para o Firefox e precisaria de apenas um hack: que funcionasse no IE6 e IE7. O famoso underline (’_') antes dos seletores (’_width:’) resolveria. Mas isso não acontece, pois essa última versão do IE corrigiu algumas falhas na interpretação dos padrões, não aceita o hack do underline e renderiza os estilos de maneira diferente da versão anterior.

Ou seja, muitas vezes o seu layout aparece de 3 maneiras diferentes dependendo do browser onde está sendo exibido: no Firefox [e outros browsers Standards compliants], no IE7 ou no IE6.
Como isso acontece com frequência (eu já tive esse problema em vários sites) segue uma maneira simples de resolver:

Hacks específicos para cada navegador.





Acima vocês podem ver a mesma página sendo exibida de forma diferente em cada um dos três navegadores (em cada um deles o box aparece de uma cor diferente). Isso acontece porque estou usando o seguinte código:
#box {
width:100px;
height:100px;
border:2px solid #ddd;
background-color:red; /* Todos os navegadores interpretam essa linha: Firefox, IE7 e IE6 */
*background-color:blue; /* Apenas IE7 e IE6 */
_background-color:green; /* Apenas IE6 */
}

As quatro primeiras linhas são interpretadas por todos os navegadores.
A 5ª linha, com o asterisco (’*') na frente do seletor, é interpretada apenas pelo IE7 e IE6, então o Firefox mantém o background vermelho.
E a 6ª linha, com o “_” na frente, é reconhecida apenas pelo IE6, então o IE7 mantém o bg blue.

Isso já resolveu muitos problemas beeem chatos.

Veja o exemplo

Veja também : CSS: Problemas comuns com internet explorer 6 e como resolvê-los