绝对定位的伪元素在IE中的flex容器中充当块元素

Question

几个月前编写代码时，我可以发誓这不是问题，但今天我注意到我的代码堆在IE中开始出现异常。我已将问题归结为CSS-display: flex和justify-content: space-between。

我有一个带有左右菜单和一个用于背景转换的伪元素的导航容器。在IE中，伪元素充当块元素，因此容器的子元素被对齐，就好像有三个项目而不仅仅是两个一样。

JSFiddle here，您也可以view this in IE vs Chrome。

nav {
  display: flex;
  justify-content: space-between;
}

nav:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: orange;
}

<nav>
  <p>
    LEFT
  </p>
  <p>
    RIGHT
  </p>
</nav>

Opera，Edge和Firefox与Chrome相同。在Chrome中显示结果：

IE中的结果：

Answer 1

众所周知，

IE有很多 flex bug 。在这里，您可以在第一个justify-content: space-between元素上使用margin-right: auto来代替p，以获得相同的效果。

请参见下面的演示和updated fiddle：

nav {
  display: flex;
  justify-content: space-between;
}

nav p:first-child {
  margin-right: auto;
}

nav:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: orange;
}

<nav>
  <p>LEFT</p>
  <p>RIGHT</p>
</nav>