Абсолютно позиционированный псевдоэлемент действует как блочный элемент в flex-контейнере в IE.

Question

Я мог поклясться, что это не было проблемой, когда я писал код несколько месяцев назад, но сегодня я заметил, что часть моего кода стала плохо работать в IE. Я отследил проблему до CSS - display: flex с justify-content: space-between.

У меня есть контейнер навигации с левым и правым меню и псевдоэлементом, который используется для фонового перехода. В IE псевдоэлемент действует как блочный элемент, поэтому дочерние элементы контейнера выравниваются, как если бы было три элемента, а не только два.

JSFiddle здесь , а также вы можете просмотреть это в IE против 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 . Здесь вместо 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>