Arrumando o CSS no Internet Explorer

Você já deve estar acostumado a se deparar com problemas na formatação do seu site pelo fato do Internet Explorer não entender nada do que você fez no CSS. Tudo funciona bem no Firefox mas o IE entende tudo errado. A seguir, algumas dicas básicas para resolver esses problemas.

.

.

.

.

A <!–[if IE]> tag

Problema: Vários atributos “sizes”, “margins” e “padding” são exibidos diferentes no internet Explorer, esse pedaço de código pode lhe ajudar a resolver esses problemas.

Adicione esse código com as medidas desejadas abaixo da tag <style>, por exemplo :

<!–[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]–>

Essas opções só serão vistas quando sua página for carregada no Internet Explorer. Eu recomendo o uso desses ajustes apenas para as áreas que não são compatíveis com o IE, e não necessariamente o CSS inteiro.

Erro na altura mínima

Problema: Quando tento criar uma DIV e altura não será abaixo de 12px o layout fica torto.

Simplesmente adicione o seguinte atributo a tag DIV:

{line-height: 0px;}

Se isso não funcionar, tente colocar o atributo da altura da linha dentro da tag <p>, com o <div> no final. O resultado será o seguinte:
<div style=”line-height: 0px; height: 5px;”></div>

<div style=”height: 5px;”><p style=”line-height: 0px;”></p></div>

As margens parecem maiores no Internet Explorer

Problema: Quando eu ajusto o atributo “margin” para todo o CSS no Internet Explorer aparece com o dobro do tamanho ou com valores adicionais. O que estraga todo meu layout.

Simplesmente use o atributo {display: inline;} dentro da tag que estão as opções da margem. Veja um exemplo:

<div style=”display: inline; margin-left: 5px;”></div>

—————————————————-

Esses são os problemas mais comuns quando o assunto é CSS no internet Explorer. E é por isso que sempre recomendo o Firefox, , o navegador que é o melhor amigo dos internautas! :p

[tags] Internet Explorer, Firefox, Dicas de CSS, [/tags]