Internet Explorer: Bug na margem com atributo float
por Vinicius Braga, sexta-feira, 2 de fevereiro de 2007 às 9:35
Quando você especifica o atributo float na regra de CSS, o Internet Explorer (IE) falha em aplicar corretamente as margens deste bloco.
Problema
Em uma regra com a declaração float:left e com margem esquerda de 20 px, o valor aparente é de 40px. Com o float:right ocorre o mesmo fenômeno, mas no lado direito (right) do bloco.
A imagem próxima, é o resultado do bug no Internet Explorer no bloco de cor salmão (boxSalmon).
.boxSalmon { margin: 40px 20px; padding: 0 20px; float: left; }
.boxYellow { margin: 0; padding: 0; }Cada quadradinho possui 20px de lado. A margem esquerda é de 20px, mas o bloco apresenta visualmente 40px de afastamento do limite esquerdo (cada 2 quadrados são 40px).
Solução
A solução é zerar os valores das margens nos blocos que possuem o atributo de float. Isso limita esses blocos a função de divisão do conteúdo, deixando as margens para os blocos internos (Pode ser um outro DIV ou mesmo direto no parágrafo).
Nesta próxima imagem, o bloco amarelo (boxYellow) é um parágrafo com afastamento de 40px das margens.
.boxSalmon { margin: 0; padding: 0; float: left; }
.boxYellow { margin: 0 40px; padding: 0; }Esta solução funciona para todos os browsers com CSS 2.1 padrão.
O que você achou? Dê sua opinião! 
Poxa, esta é a única solução para este problema? Estou tal problema e a única forma que consegui resolvê-lo foi utilizando position: absolute nas divs, mas não gostei, já que considero uma solução alternativa. Gostaria de usar float, muito mais simples, só que pelo visto terei mais lixo no meu código por causa do IE. =\
Acho que vou ficar com a solução do posicionamento absoluto.
(ainda esperando que uma solução melhor caia do céu)
Reply
Opa,
Desculpa postar de novo, mas a “melhor solução” caiu do céu neste momento. Estou há 1 semana procurando a solução e finalmente encontrei uma que me satisfaz. Vamos a ela: adiciona-se a propriedade “display: inline” no box que contém o float. Desta forma a margem que antes era dobrada pelo IE, não será mais.
a fonte foi: http://www.positioniseverything.net/explorer/doubled-margin.html
Reply
Realmente muito simples esta solução Leandro. Vou usá-la e verificar se ela se enquadra bem na minha forma de fazer layouts de internet. Muito obrigado.
Reply
Muito boa a dica Leamdro, tava querendo isto mesmo pois antes eu fazia do jeito descrito acima.
Reply