为什么绝对定位的 Flex 项目没有从 IE11 的正常流程中删除？

在 IE11 中绝对定位的弹性项无法从正常流中移除

问题：

在带有内容的两个 div 和一个带有绝对位置的背景第三个 div 的情况下，容器是一个 flexbox。这在 Chrome 和 Safari 中都可以正常工作，但 Firefox 和 IE11 将绝对定位的 div 考虑在内，并在 div 之间分配空间，就像有三行中的三个 div 一样。

分析：

Firefox 将绝对定位的第三个 div 视作一个流内弹性项，并将其考虑入 space-between 计算中。（IE11 也是如此；Chrome 和 Edge 会忽略它。）

显然，这与当前 flexbox 规范不符：

4.1. 绝对定位的弹性项

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

解决方法：

• 移动绝对定位的 div

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

• 使用 CSS Grid 布局

CSS Grid 布局不考虑绝对定位的元素，因此它可以解决此问题。

注意：

对于 Firefox，此问题已在 v52 中解决。但是，IE11 仍然存在这个问题。

以上是为什么绝对定位的 Flex 项目没有从 IE11 的正常流程中删除？的详细内容。更多信息请关注PHP中文网其他相关文章！