Pourquoi IE11 traite-t-il les éléments flexibles absolument positionnés comme des éléments In-Flow ?

Interaction d'un élément flexible à positionnement absolu avec le flux normal dans IE11

Dans une situation où un conteneur contient plusieurs divs, dont l'un est en position absolue en arrière-plan, IE11 présente un comportement non conventionnel par rapport à d'autres navigateurs comme Chrome ou Firefox. Alors que le div positionné en absolu est correctement supprimé du flux normal, IE11 le traite comme un élément flexible entrant, conduisant à une répartition inattendue de l'espace entre les div.

Racine du problème

Le nœud du problème réside dans la violation par IE11 de la spécification flexbox. Conformément aux spécifications, les enfants flexibles positionnés de manière absolue doivent être exclus de la disposition flexible et ne pas contribuer aux calculs d'espacement.

Solutions de contournement

Plusieurs solutions de contournement peuvent atténuer ce problème dans IE11. :

Repositionner l'arrière-plan Div

Au lieu de placer le div d'arrière-plan en position absolue après les autres div, déplacez-le vers une position entre eux, créant une structure comme :

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

Résumé

L'inadéquation de comportement entre IE11 et les navigateurs conformes résulte de l'adhésion d'IE11 à une interprétation obsolète de la spécification flexbox. En utilisant l'une des solutions de contournement, les développeurs peuvent garantir un comportement cohérent dans tous les navigateurs lorsqu'ils traitent des éléments flexibles positionnés de manière absolue.

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!