Solution soignée CSS uniquement
Utilisez le code suivant pour ajouter un premier enfant sans contenu à la div qui se déplace involontairement:
.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
L'avantage de cette méthode est que vous n'avez pas besoin de modifier le CSS d'un élément existant et qu'elle a donc un impact minimal sur la conception. À côté de cela, l'élément qui est ajouté est un pseudo-élément, qui n'est pas dans l'arbre DOM.
La prise en charge des pseudo-éléments est très répandue: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ et IE 8+. Cela fonctionnera dans n'importe quel navigateur moderne (soyez prudent avec le plus récent ::before
, qui n'est pas pris en charge dans IE8).
Le contexte
Si le premier enfant d'un élément a un margin-top
, le parent ajustera sa position pour réduire les marges redondantes. Pourquoi? C'est comme ça.
Étant donné le problème suivant:
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>
<div class="parent"><!--This div moves 40px too-->
<div class="child">Hello world!</div>
</div>
Vous pouvez le corriger en ajoutant un enfant avec du contenu, tel qu'un simple espace. Mais nous détestons tous ajouter des espaces pour ce qui est un problème de conception uniquement. Par conséquent, utilisez la white-space
propriété pour simuler du contenu.
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="fix"></div>
<div class="child">Hello world!</div>
</div>
Où position: relative;
assure un positionnement correct du correctif. Et white-space: pre;
vous évite d'ajouter du contenu - comme un espace blanc - au correctif. Et height: 0px;width: 0px;overflow: hidden;
s'assure que vous ne verrez jamais le correctif.
Vous devrez peut-être ajouter line-height: 0px;
ou max-height: 0px;
vous assurer que la hauteur est réellement nulle dans les anciens navigateurs IE (je ne suis pas sûr). Et éventuellement, vous pouvez l'ajouter <!--dummy-->
dans les anciens navigateurs IE, si cela ne fonctionne pas.
En bref, vous pouvez faire tout cela avec seulement CSS (ce qui supprime la nécessité d'ajouter un enfant réel à l'arborescence DOM HTML):
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="child">Hello world!</div>
</div>