Bug da margem duplica no Internet Explorer 6

Este talvez seja um dos bugs mais conhecidos pelos desenvolvedores, e é também o mais fácil de ser corrigido.

Ele ocorre quando temos elementos flutuando dentro de um container.

Veja o exemplo:

XHTML:

<div id="container">
<div id="coluna1"></div>
</div>

CSS:
obs: as bordas foram adicionadas apenas para facilitar a vizualização dos elementos.

#container{
width:600px;
height:300px;
border:1px solid #000;
}

#coluna1{
float:left;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Nesse exemplo temos uma div com id container que contem outra div com id coluna1, a div coluna1 esta flutuado a esquerda dentro da div container, sendo que a div coluna1 também esta com margem esquerda de 20px. Bom, pelo menos deveria ter 20px, pois se executarmos o código no IE6 notaremos que na verdade a div esta distanciada em 40px.

Então, em resumo esse bug sempre ocorre no IE6 quando definimos uma margem do mesmo lado do float, como margin-left e float-left ou margin-right e float-right.

Visualização no IE6

Visualização no Firefox

Porque isso ocorre?

Provavelmente o programador da Microsoft não era muito bom de matemática. Mas brincadeiras de lado o fato de esse bug ocorrer é desconhecido, assim como a maioria dos bugs do IE.

Para corrigilo é simples, basta adicionar a propriedade display:inline na div coluna1 e as margens funcionarão normalmento no IE6.

Ficando assim o CSS da div coluna1:

#coluna1{
float:left;
display:inline;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Posts relacionados

• 14/12/2008 -- Problemas com floats - Desobstruindo floats
• 28/02/2009 -- Centralizando Layout com CSS
• 28/02/2009 -- Recomendação de Livros para Web Design
• 26/02/2009 -- Leitores de Tela, Exemplo/Discussão
• 14/12/2008 -- CSS para Inspiração

(2 votes, average: 4,50 out of 5)

 Loading ...