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

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

DDD
Libérer: 2024-12-24 13:09:10
original
110 Les gens l'ont consulté

Why Are Absolutely Positioned Flex Items Not Removed From the Normal Flow in 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 布局。
Copier après la connexion

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>
Copier après la connexion
  • 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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal