Pourquoi IE11 inclut-il des éléments flexibles positionnés de manière absolue dans les calculs de mise en page ?

Élément flexible positionné de manière absolue pris en compte dans le flux dans IE11

Problème

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.

Solutions de contournement

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!