IE et les marges des flottants

Non ce n’est pas le titre du prochain best-seller mais bel et bien d’un bug d’Internet Explorer qui peut s’averer très ennuyeux dans certains cas.
Lorsque vous spécifiez une marge sur un conteneur flottant, IE, pour une raison qui m’est encore inconnue, double la valeur des marges.

Prenons un exemple concret :

<style type="text/css">
        div.monConteneur{height:32px;width:320px;background:#ccc;}
        div.monBlock{height:32px;width:32px;margin-left:32px;float:left;background:#000;}
</style>

<div class="monConteneur">
        <div class="monBlock"></div>
</div>

Dans cet exemple, nous avons un calque de dimensions 320×32px  de couleur gris. Dans celui-ci, nous avons placé un autre calque flottant gauche de dimensions 32×32px de couleur noir avec une marge gauche de 32px. Rien de bien méchant…

Seulement, voilà le résultat obtenu sous IE (testé sur la version 6) et sur un autre navigateur :

Etonnant non ? IE a doublé la marge du conteneur !

La solution la plus saine à ce problème est de spécifier à la CSS du block (noir) un affichage de type ‘en ligne’ : display : inline;

div.monBlock{height:32px;width:32px;margin-left:32px;float:left;background:#000;display:inline;}