html – IE11中的正常流程中没有删除绝对定位的flex项目

发布时间：2020-12-14 21:26:14 所属栏目：资源来源：网络整理

导读：我们有两个带内容的div和第三个div，它是具有绝对位置的背景。 Container是一个flexbox。一切都可以在Chrome和Safari中正常工作，但Firefox和IE11在绝对定位div中有所影响，并且在div之间分配空间，就像连续有3个div一样。我做了一个jsfiddle的例子。有没

我们有两个带内容的div和第三个div，它是具有绝对位置的背景。

Container是一个flexbox。

一切都可以在Chrome和Safari中正常工作，但Firefox和IE11在绝对定位div中有所影响，并且在div之间分配空间，就像连续有3个div一样。

我做了一个jsfiddle的例子。有没有办法解决这个bug？
https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}

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

解决方法

它正在发生，因为正当的内容：空间 – 中间;均匀分配项目开头的第一项，结尾的最后一项。所以只需要推杆< div class =“bg”>背景< / div>介于< div class =“c1”> Content 1< / div>之间和< div class =“c2”>内容2< / div>
喜欢这个

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

</div>

你可以在https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content上看到原因

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!