Pourquoi les éléments Flex positionnés de manière absolue ne sont-ils pas supprimés du flux normal dans IE11 ?

Les éléments flexibles absolument positionnés ne peuvent pas être supprimés du flux normal dans IE11

Problème :

En deux divs avec contenu et un troisième div avec position absolue en arrière-plan Dans ce cas, le conteneur est une flexbox. Cela fonctionne bien dans Chrome et Safari, mais Firefox et IE11 prennent en compte le div positionné de manière absolue et répartissent l'espace entre les divs comme s'il y avait trois divs sur trois lignes.

Analyse :

Firefox traite le troisième div en position absolue comme un élément flexible entrant et le prend en compte dans le calcul de l'espace entre les deux. (Il en va de même pour IE11 ; Chrome et Edge l'ignorent.)

De toute évidence, cela est incompatible avec la spécification actuelle de flexbox :

4.1. 绝对定位的弹性项

由于它不在流中，一个 flex 容器的绝对定位从属项不会参与 flex 布局。

Solution de contournement :

• Déplacer le positionnement absolu div

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

• Utiliser la disposition de la grille CSS

La disposition de la grille CSS ne prend pas en compte les éléments positionnés de manière absolue, elle Ce problème peut être résolu.

Remarque :

Pour Firefox, ce problème a été résolu dans la v52. Cependant, IE11 a toujours ce problème.

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!