Maison >interface Web >tutoriel CSS >Pourquoi un élément flexible positionné de manière absolue reste-t-il dans le flux normal dans IE11 ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-12-17 09:26:25177parcourir

Why Does an Absolutely Positioned Flex Item Remain in Normal Flow in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn