Fusion de marge erronée en relation avec des flottants et un clear (Bug 451791)
C'est un vieux bug recensé de Firefox toujours d'actualité sur sa version 28. Un petit bout de code pour visualiser le bug:
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Firefox bug 451791</title>
</head>
<body>
<div>
<div style="float:left">le flottant</div>
<div style="clear:both"></div>
</div>
<div style="margin-top:50px;">Un élément qui suit un div clear avec un margin-top de 50px</div>
</div>
</body>
</html>
description du problème
- Un div englobe en flottant et 1 élément en clear
- Le div qui vient ensuite possède un margin-top
Le margin-top du content semble appliqué aussi à l'élément flottant. Il semblerait que cela soit dû à l’algorithme de fusion des marges, extrêmement fragile (sic) de Firefox, ce qui explique qu'il ne soit toujours pas corrigé bien que le bug soit ouvert depuis... 6ans ! On s'aperçoit effectivement qu'en rajoutant un border ou un padding au div qui a le clear, le problème disparaît, ce qui laisse bien supposer un problème de fusion. (il y a d'autres variations de ce même bug)
Contournements
utiliser un padding-top au lieu d'un margin-top ou ajouter
sur l'élément clear s'il s'agit d'un élément vide (méthode à n'utiliser qu'en dernier lieu)
Editer