为什么 IE11 在布局计算中包含绝对定位的 Flex 项目？-css教程-PHP中文网

为什么 IE11 在布局计算中包含绝对定位的 Flex 项目？

Mary-Kate Olsen

发布： 2024-12-21 08:03:10

原创

295 人浏览过

Why Does IE11 Include Absolutely Positioned Flex Items in Layout Calculations?

IE11 中 Flow 中考虑的绝对定位 Flex 项目

在具有两个内容填充 div 和一个绝对定位背景 div 的 Flexbox 容器中，IE11（以及版本 52 之前的 Firefox）在计算空间分布时会考虑绝对定位的 div。此行为偏离了 Flexbox 规范，该规范规定绝对定位的项目不参与 Flex 布局。

重新定位绝对定位的 Div

一个可能的解决方案是在其他两个div之间移动绝对定位的div，如图所示下面：

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

登录后复制

使用 Flex Wrap

另一种解决方法是使用 Flex Wrap 强制绝对定位的项目换行。这可以防止它影响其他项目的空间分布：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

登录后复制

在 Firefox 中（直到 v52）：覆盖默认行为

对于 Firefox（之前的版本） 52)，此 CSS 属性可用于覆盖默认行为并从流中删除绝对定位的 div：

.container {
    display: -moz-box;  /* Firefox specific property */
    -moz-box-orient: horizontal;  /* Firefox specific property */
}

登录后复制

以上是为什么 IE11 在布局计算中包含绝对定位的 Flex 项目？的详细内容。更多信息请关注PHP中文网其他相关文章！