为什么绝对定位的 Flex 项目在 IE11 中仍保持正常流程？

绝对定位的 Flex 项目在 IE11 中保持正常流程

在具有三个 div 的 Flexbox 布局中，其中两个包含内容，一个绝对定位为对于背景，IE11 将绝对定位的 div 视为正常流的一部分，相应地分配 div 之间的空间。此行为与标准不同，可能会导致错位。

解决方法：

Firefox 已在版本 52 中解决了此问题，与 Flexbox 规范保持一致。然而，IE11仍然存在问题。要解决此问题：

• 重新定位绝对定位的项目：不要将绝对定位的 div (.bg) 放在末尾，而是将其移动到其他两个 (.c1 和.c2)。这会更改流顺序，从而有效地从正常流中删除绝对定位的元素。

以下是更新的 HTML 代码：

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

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