Diferentes estilos (.css) para Internet Explorer e Firefox

CSS - IE e Firefox

Que está acostumado a mexer com Folhas de Estilo, sabe o quanto é chato, por vezes, desenvolver um design para um navegador e, ao abrir os demais, perceber pequenos erros na diagramação. Felizmente essa situação pode ser facilmente contornável e existem pelo menos duas maneiras de fazer isso. A primeira delas é associar diferentes folhas de estilo, um arquivo css, para cada navegador. A segunda, por sua vez, consiste em atribuir diferentes valores para um mesma propriedade que alterará a diagramação no IE através de hacks. A dica fica então em desenvolver o css para o Firefox e depois fazer os reparos necessários no Internet Explorer.

Atribuir nova Folha de Estilo ao Internet Explorer

Se o caso for grave, quer dizer, ficar tudo muito estranho, esta é a melhor opção. Assim você desenvolve um novo arquivo .css e pode, ou anular o do Firefox, ou complementá-lo. Neste caso, temos que mexer no html a fim de chamar uma folha específica ou associar o estilo dentro do html ele mesmo. A desvantagem é que, no caso de um novo arquivo, temos aí uma requisição a mais no servidor.

A associação do estilo é feito por comentário que é lido apenas pelo IE. Eg.:

<!–[if IE]>
<style>
#search {margin: 10px 0 0 5px;}
</style>
<![endif]–>

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”http://exemplo.com.br/style_ie.css” />
<![endif]–>

Ainda pode ser o caso de atribuir diferentes estilos para diferentes versões do Internet Explorer, neste caso, deve-se complementar o comentário com a lista a seguir:

• <!–[if IE]>Para todas as versões do Internet Explorer<![endif]–>
• <!–[if IE 5]>Para o Internet Explorer 5<![endif]–>
• <!–[if IE 5.0]>Para o IE 5.0<![endif]–>
• <!–[if IE 5.5]>Para o IE 5.5<![endif]–>
• <!–[if IE 6]>Para o IE 6<![endif]–>
• <!–[if gte IE 5]>Para versões mais atuais que o Internet Explorer 5 inclusive<![endif]–>
• <!–[if lte IE 5.5]>Para versões mais antigas que o Internet Explorer 5.5 inclusive<![endif]–>
• <!–[if lt IE 6]>Para versões mais antigas que o Internet Explorer 6 inclusive<![endif]–>

Hacks .css para Internet Explorer 6 e 7

Se o problema for mais simples, podemos adicionar hacks nas folhas de estilo padrão, o que é, para mim, a melhor e mais fácil alternativa. Veja os exemplos

Hack para IE 6

#search {
margin: 10px 0 0 5px; /*todos os navegadores*/
_margin: 10px 0 0 5px; /* apenas para o IE6 */
}

Hack para IE 7

#search {
margin: 10px 0 0 5px; /*todos os navegadores*/
*margin: 10px 0 0 5px; /* apenas para o IE6 */
}

Agora que já aprendeu a alterar os estilos para diferentes navegadores, que tal aprender como testar o resultado em diferentes navegadores e como ter o Internet Explorer 6 e 7 instalados ao mesmo tempo?