Dans un conteneur flexbox avec deux div remplis de contenu et un div d'arrière-plan positionné de manière absolue , IE11 (et Firefox avant la version 52) prend en compte le div en position absolue lors du calcul de la répartition de l'espace. Ce comportement s'écarte de la spécification flexbox, qui stipule que les éléments en position absolue ne participent pas à la disposition flexible.
Déplacer la division en position absolue
Une solution possible consiste à déplacer le div en position absolue entre les deux autres div, comme illustré ci-dessous :
<div class="container"> <div class="c1">Content 1</div> <div class="bg">Background</div> <div class="c2">Content 2</div> </div>
Utiliser Flex Wrap
Une autre solution de contournement consiste à utiliser flex wrap pour forcer l'élément en position absolue à passer sur une nouvelle ligne. Cela l'empêche d'affecter la répartition de l'espace des autres éléments :
.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
Dans Firefox (jusqu'à la v52) : Remplacer le comportement par défaut
Pour Firefox (version antérieure 52), cette propriété CSS peut être utilisée pour remplacer le comportement par défaut et supprimer le div en position absolue du flux :
.container { display: -moz-box; /* Firefox specific property */ -moz-box-orient: horizontal; /* Firefox specific property */ }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!