Pourquoi un élément flexible positionné de manière absolue reste-t-il dans le flux normal dans IE11 ?

L'élément flexible positionné de manière absolue reste dans le flux normal dans IE11

Dans une disposition de boîte flexible avec trois divs, deux contenant du contenu et un positionné absolument comme en arrière-plan, IE11 traite le div en position absolue comme faisant partie du flux normal, distribuant l'espace entre les div en conséquence. Ce comportement diffère des normes et peut entraîner un désalignement.

Solution de contournement :

Firefox a résolu ce problème dans la version 52, en s'alignant sur la spécification flexbox. Cependant, IE11 reste problématique. Pour résoudre ce problème :

• Repositionnez l'élément à position absolue : Au lieu de placer le div (.bg) à position absolue à la fin, déplacez-le entre les deux autres (.c1 et .c2). Cela modifie l'ordre du flux, supprimant ainsi l'élément positionné de manière absolue du flux normal.

Voici le code HTML mis à jour :

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

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!