Quando o estilo CSS não funciona em determinado navegador, use hack!

[ads2]
Salve! Grande parte dos WEB Design iniciantes se deparam com um desafio chamado Internet Explorer, pois ainda há quem use o navegador que considerado o pior de todos por muitos usuários. Além disso também há situações em que certos estilos funcionam de forma diferente em determinados navegadores. Mas os seus problemas acabaram, eis que vos apresento os hacks, que são códigos colocados no CSS para que uma regra funcione em determinado navegador, veja implementação.
Para Internet Explorer versão 6, o IE6, é bem simples basta colocar um “_” underline antes do estilo, da seguinte forma:

body{
_background: blue;
}

Para o IE7, Internet Explorer versão 7, se coloca um “*” asterisco antes do estilo, veja o exemplo:

body{
*background: green;
}

Para que seus estilos funcionem na versão 8 do Internet Explorer é preciso que no final de cada estilo se coloque um \0/, isso mesmo um zero entre duas barras, isso antes do ponto e vírgula que encerra a regra, veja:

body{
background: black\0/;
}

Para o Internet Explorer 9 é um pouco mais complexo, pois é preciso o uso de Media Queries, mas também não é bicho de sete cabeças, veja o exemplo:

@media all and (min-width:0) {
	body{background: purple;}
}

No Mozilla Firefox, basta usar a seguinte Querie:

@-moz-document url-prefix(){/*FIREFOX*/
 	body{background: red;}
}

Para o Google Chrome e Safari, o código é o seguinte:

@media screen and (-webkit-min-device-pixel-ratio:0){
	body{background: yellow;}
}

E por fim, para o navegador Opera, deve ser usada a seguinte regra de Media Querie:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
	body{background: white;}
}

Perceba que em todas as regras eu faço a alteração da cor do plano de fundo do corpo do documento, mas você pode fazer muito mais colocando os estilos de acordo com sua necessidade.
Para testar o funcionamento destes CSS você pode fazer o seguinte: criar um arquivo HTML abrir um tag < style > e colocar o seguinte código dentro:

body{
        *background: green; /*IE 7*/
	_background: blue; /*IE 6*/
	background: black\0/; /*IE 8*/
}
@media all and (min-width:0) {/*IE 9*/
	body{background: purple;}
}
@-moz-document url-prefix(){/*FIREFOX*/
  	body{background: red;}
}	
@media screen and (-webkit-min-device-pixel-ratio:0){/*chrome e safari*/
	body{background: yellow;}
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*Opera*/
	body{background: white;}
}

Depois abra o arquivo com navegadores diferentes para perceber o funcionamento, veja que em cada navegador o documento tem um cor de fundo diferente. Perceba que coloquei a regra do Internet Explorer 7 antes da regra da versão 6, pois do contrário ela iria sobrepor e a única regra atendida seria a da versão 7, que a propósito também funciona da 6.
Para testar as versões do Internet Explorer você pode baixar um programa chamado IE tester, que simula todas as versões do navegador desde a 5.5 até a atual. Faça download do IE Tester aqui.

É isso ai pessoal, espero que tenham gostado do post, qualquer dúvida ou sugestão deixem nos comentários. Até a próxima!
[ads1]