为什么 IE11 将绝对定位的 Flex 项目视为流内元素？

IE11 中绝对定位的 Flex Item 与正常流程的交互

容器包含多个 div 的情况，其中一个是绝对定位的作为背景，与 Chrome 或 Firefox 等其他浏览器相比，IE11 表现出了非常规的行为。虽然绝对定位的 div 已从正常流中正确删除，但 IE11 将其视为流内 Flex 项目，导致 div 之间出现意外的空间分布。

问题根源

问题的症结在于IE11违反了flexbox规范。根据规范，绝对定位的 Flex 子项应从 Flex 布局中排除，并且不会参与间距计算。

解决方法

几种解决方法可以缓解 IE11 中的此问题:

重新定位背景Div

不要将绝对定位的背景 div 放置在其他 div 之后，而是将其移动到它们之间的位置，创建如下结构：

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

摘要

IE11 和兼容浏览器之间的行为不匹配源于 IE11遵守 Flexbox 规范的过时解释。通过采用其中一种解决方法，开发人员可以确保在处理绝对定位的弹性项目时跨浏览器的行为一致。

以上是为什么 IE11 将绝对定位的 Flex 项目视为流内元素？的详细内容。更多信息请关注PHP中文网其他相关文章！