首页 > web前端 > css教程 > 为什么绝对定位的 Flex 项目在 IE11 中仍保持正常流程?

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

Barbara Streisand
发布: 2024-12-17 09:26:25
原创
181 人浏览过

Why Does an Absolutely Positioned Flex Item Remain in Normal Flow in 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板