Diferentes estilos (.css) para Internet Explorer e Firefox

CSS - IE 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?

6 Comentários em “Diferentes estilos (.css) para Internet Explorer e Firefox”

  1. EnterNauta disse em 06/02/2009 às 11:09:

    Leonardo,

    De fato, é um recurso indispensável, a qual temos que recorrer com freqüência.

    Abraços!

  2. Davi disse em 05/05/2009 às 11:43:

    Olá

    Preciso de uma ajuda urgente.

    Não consigo fazer um site funcionar corretamente ao mesmo tempo no Internet Explorer, Firefox e Opera.

    Acessem esta página em cada navegador e comprovem:

    Vejam principalmente o final da página. No Internet Explorer tudo bem. Mas o Firefox e o Opera mudam a aparência da página. Utilizei apenas CSS para estilizar a página.

    Além disso, no Explorer e no Firefox a página fica centralizada, que é como quero, mas no Opera ela fica à esquerda.

    O que fazer para que a página apareça no Firefox e Opera assim como aparece no Explorer? O problema é do código CSS ou do navegador?

    Muito obrigado.

    • EnterNauta disse em 05/05/2009 às 18:39:

      Davi,

      É comum (mas não devia) que navegadores interpretem certas parcelas de código diferentemente.
      Nestes casos, eu costumo desenvolver corretamente para o Firefox. Raramente o Opera ou o Chrome se mostram incompatíveis neste caso. Uma vez feito isso, eu aplico os hacks ensinados neste tutorial para ajustar o site ao Internet Explorer.

      Quanto a página, em particular, não tive problema nenhum em acessá-la no IE7 7.0.5730.13, Firefox 3.010, Opera 10.00 Alpha e Chrome 1.0.154.53.

  3. Portal Formosafest disse em 02/09/2009 às 15:19:

    Fantástica e simples esta explanação, visto que temos muitas dificuldades de colocar códigos de estilos diferentes para os navegadores, a W3C deveria obrigar um padrão entre eles e acredito ter saido como já li diversas orientações, por que para nós Webstanders é hiper complexo elaborar layout´s que se enquadrem as diferentes formas de interpretação dos navegadores atuais…

  4. Nanda disse em 10/06/2010 às 06:33:

    Bá, bem o que precisava!

    Valeuu!! ;)

  5. EnterNauta disse em 31/10/2010 às 08:16:

    Gabriel,
    O código é colocado da mesma maneira, no header.php de seu tema.

Deixe seu comentário