Internet Explorer: Bug no atributo float

Quando você especifica o atributo float na regra de CSS, o Internet Explorer (IE) falha em aplicar corretamente as margens deste bloco.

Problema

Uma declaração float:left; provoca em uma margem esquerda de 10 px, o valor aparente de 20px. No 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; }

A margem esquerda é de 20px (cada quadradinho possui 20 px de lado), mas o bloco apresenta visualmente 40px de afastamento (cada 2 quadrados são 40px) do limite esquerdo.

Solução

A solução é zerar os valores das margens nos blocos que possuem o atributo de float. Isso deixa a função de divisão da informação para esses blocos, e 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.

É isso, t+