Internet Explorer & Edições (Interpretações) do CSS

Este texto é uma tradução com interpretações minhas, Daniel, de
http://www.codeproject.com/useritems/css-internet-explorer.asp
(fevereiro de 2006)
Também está no site do autor:
http://www.webcredible.co.uk/user-friendly-resources/
css/internet-explorer.shtml
(abril de 2006)

Tentar obter sites baseados em CSS para se ver em diversos navegadores pode ser difícil. Muitos dos problemas vêm da implementação diferente dos comandos CSS pelo Internet Explorer e os outros, mais padronizados. Nem tudo está perdido, mas como muitas diferenças que você vê entre os navegadores são causadas pela mesma edição do CC do iE...

1. Elementos da página são mais estreitos no Internet Explorer

Talvez o mais famoso problema do CSS e iE é a interpretação "corretíssima" do Internet Explorer com relação ao modelo de caixa do CSS, que torna elementos da página mais estreitos. Todo elementos HTML ou XHTML é essencialmente uma caixinha; a largura é o total da margem, borda, espaçamento interno e conteúdo. Imagine a seguinte regra CSS:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}

Isto significa que cada DIV tem 50em de largura, sendo 30em a área do conteúdo, 4em o espaçamento interno (distância da borda), 1em de borda e 5em de margin (distância invisível entre a borda e outro elemento), em todas as direções (5em + 1em + 4em + 30em + 4em + 1em + 5em).

No bendito do iE, entretanto, a borda e o espaçamento interno são interpretados com parte da largura declarada, como parte da área do conteúdo, e não são adicionados. Então, o espaço do conteúdo é reduzido a 20em (30em - 4em+1em=5em[esquerda] - 4em+1em=5em[direita]), e o total da DIV é de 40em.

Este problema de modelo de caixa do CSS ocorre no iE5.x, e pode ocorrer no iE6, dependendo da sua declaração do valor ISO no código (X)HTML.

• [?xml version="1.0" encoding="iso-8859-1"]


• [meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /]

O primeiro comando é colocado na primeira linha do documento HTML e o segundo em qualquer lugar dentro da tag HEAD. Como a validação do XHTML depende da declaração de umas das duas linhas, não há muitos problemas (atualmente), mas a W3C recomenda o uso da primeira porque a segunda está se despedindo(!) - será retirada no futuro.

Por usar o primeiro comando, o Internet Explorer 6 vai exibir de forma errada o modelo de caixa CSS, como na versão 5 do navegador. Para arrumar esse problema, você precisa inserir um "corte" CSS para ter um valor diferente quando lido dependendo do navegador. O "corte"

CSS que você usa depende de qual valor da ISO declarada, e que versão do iE exibe o modelo incorretamente.

Para arrumar esse problema no somente no iE5.x, use o seguinte comando CSS:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}

Para arrumar em todas as versões do iE, use o seguinte:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}

(O autor original deste artigo recomenda ler um outro, "CSS hacks & browser detection" para mais "cortes" desses tipos.)

2. O texto sai do seu contâiner/espaço determinado em navegadores não-iE

O Internet Explorer, diferentemente de outros navegadores, vai expandir a borda e a cor de fundo para que o texto não saia do contâiner.
Digamos que uma DIV seja de classe "box" (class="box") e tenha o seguinte comando CSS:

.box {
width: 40px;
}

Navegadores não-iE vão se fixar cegamente na largura de 40px e não vão expandir para acomodar qualqer texto maior que isso. Entretanto, o iE interpreta o "width" como "min-width" (largura mínima), então se o texto for maior, a largura acompanha seu tamanho (o mesmo ocorre com "height" e "min-height").
Para ficar certo de que o texto não vai transbordar em nenhum navegador, você precisa usar a seguinte regrinha CSS, além daquela primeira:

html>body .box
{
width: auto;
min-width: 40px
}

Como o comando CSS tem html>body na frente, o iE vai ignorar estas regras (o autor deste artigo recomenda novamente a leitura daquele outro artigo indicado anteriormente). sendo assim, este comando CSS serve para navegadores não-iE. A primeira regra "width: auto" cancela a regra original de largura fixa. O segundo comando "min-width: 40px" determina uma largura mínima, permitindo que o conatâiner/caixa se expanda conforme o texto.

3. Sumindo com a imagem de fundo

O iE tem um probleminha muito esquisito para fazer imagens (e de vez em quando textos - particularmente se há elementos flutuando [float] em torno dele) de fundo desaparecerem. Iss o normalmente acontece quando você rola a página para cima e para baixo, e você pode fazer reaparecer o fundo atualizando a mesma (F5).

Claro que você não quer que o usuário do seu site tenha que ficar atualizando a página para ver a imagem de fundo por completo! Uma solução maluca para um problema maluco é inserir o comando "position: relative" na regra CSS no contâiner que contém a imagem de fundo:

.foo {
background: url(filename.jpg);
position: relative
}


Ocasionalmente isto não funciona, assim outra solução é atribuir largura e altura ao elemento com a imagem de fundo. Você pode não querer fazer isso, então pode atribuir uma altura de 1% apra o iE, porque ele interpreta "height" como "min-height" (veja o número 2), o que não vai alterar na aparência:

.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}

A altura de 1% é cancelada pela regra "height: auto", que é ignorada pelo iE que não entende "html>body"

4. Larguras que só funcionam no iE

Todo elemento HTML ou é de bloco ou de linha. Exemplos de elementos de bloco incluem include [div], [p], [h1], [form] e [li]. Exemplos de elementos de linha [font], [a], [label], [strong] e [em]. Uma das características dos elementos de linha é que você não pode mudar a largura deles. Teoricamente a seguinte regra CSS não deveria funcionar:

span {
width: 100px
}

Esta regra CSS não trabalha, com exceção do nosso amigo Internet Explorer em que cada "span" terá uma largura de 100px. Em todos os outros navegadores, a largura do "span" vai simplesmente ser a largura do númer de caracteres existentes nele. A solução? Faça do "span" um elemento do nível de bloco:

span {
width: 100px;
display: block
}

(Tornando o "span" em um elemento de bloco, vai fazer com que a largura do comando funcione em todos os navgadores, mas fará também o "span" começar numa nova linha. Para comabater isso você pode atribuir"flot: left" ao "span".)

5. Versão da página sem estilo aparecendo no iE

Quando seu website é carregado no iE, uma versão sem o estilo especificado aparece por um ou dois segundos, antes do estilo ser entrar em ação? Se sim, seu site pode estar sofrendo de uma coisa conhecida por "Flash Of Unstyled Content - FOUC" (flash de conteúdo sem estilo).

Se você estiver usando a diretiva "@import" (ex: [style type="text/css"]@import "styles.css";[/style]) para chamar seu arquivo CSS, isso pode acontecer com seu website no iE. É estranho, não há explicação lógica para isso, só a certeza de que deve ser reparado.

Uma solução simples para esse problema ilógico é igualmente ilógico - insira um elemento "link" ou "script" no cabeçalho:

• [script type="text/javascript" src="scripts.js"][/script]


• [link rel="stylesheet" href="styles.css" type="text/css" media="print"]

Não faz diferença qual você usa (pode até usar os dois). Se você fornecer uma folha de estilo para impressão, usando o elemento "link" para referenciá-lo (como indicado no exemplo acima), então você não verá o fenômeno FOUC.

6. Página com largura fixa não fica no centro da janela

Fez um site com largura fixa e não consegue centralizá-lo no Internet Explorer? Ou você consegue centralizá-lo no iE, mas não nos "outros" navegadores? Relaxa, não é culpa sua! Infelizmente o jeito certo para alinhar um conteúdo a ocentro através do CSS não funciona corretamente no iE:

#container {
width: 770px;
margin: 0 auto
}

O segundo comando, "margin: 0 auto", basicamente dá a nosso conteúdo uma margem automática na esquerda e direita, desse modo posicionando o elemento no centro da janela.
O iE, entretanto, vai precisar de comandos um pouquinho diferentes para fazer isso:

body {
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}

Isso certamente vai centralizar o conteúdo no iE também. Para previnir o texto de alinharjuntamente ao centro, inserimos "ext-align: left" na DIV "container".



Este artigo foi retirado do site www.codeproject.com, como mencionado no início, e é de autoria de Trenton Moss, dito como um maluco por usabilidade e acessibilidade.