Flexbox style "justify-content: space-between" несовпадающий в Firefox с абсолютно позиционированным дочерним элементом

У вас есть проблема с Flexbox и пробелом между в Firefox 36. По причинам, которые неизвестно, между пробелами неверно в Firefox (вызывая странный запас слева), но совершенный в Google Chrome.

Захват экрана Chrome

Захват экрана Firefox

CSS

  .form-status {
  display: flex;
  justify-content: space-between; 
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: $gray;
  }

  .step {
    position: relative;
    text-align: center;
    padding-top: 15px;
    color: $gray-light;

    &:after {
      content: "";
      position: absolute;
      height: 8px;
      width: 8px;
      border-radius: 50%;
      top: -11px;
      left: 50%;
      margin-left: -11px;
      background: $gray;
      border: 8px solid #0c0616;
      box-sizing: content-box;
    }

    &:first-child, &:last-child {
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100vw;
        right: 0;
        height: 1px;
        background: black;
      }
    }
    &:first-child:before { right: 50%; }
    &:last-child:before { left: 50%; }

    &.active {
      color: white;
      &:after { background: $brand-yellow; }
    }
  }

}

HTML

    <div class="page-section page-section-dark page-section-narrow">
    <div class="container">
        <div class="form-status">
            <div class="step {{#ifeq step "one"}}active{{/ifeq}}">
                Basic Information
            </div>
            <div class="step {{#ifeq step "two"}}active{{/ifeq}}">
                Agreement
            </div>
            <div class="step {{#ifeq step "three"}}active{{/ifeq}}">
                Payment
            </div>
        </div>
    </div>
</div>

Ответы

Ответ 1

Проблема связана с этим стилем на вашей последней странице:

.form-status:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:#555
}

(который, я думаю, исходит из "&: before" в вашем исходном вопросе).

.form-status является гибким контейнером, и это дает ему абсолютно позиционированное дочернее и абсолютное позиционирование для детей гибких контейнеров не вполне работоспособно еще - очевидно, что IE (или их следующий "Spartan" ) является единственным браузером, который сейчас использует последний spec-текст.

Этот стиль разбивает ваш макет, потому что абсолютно позиционированный ребенок бросает невидимый "placeholder" размером 0 размеров, который формирует гибкий элемент размера 0, и этот гибкий элемент влияет на позиционирование всех других элементов гибкости, участвуя в space-around выравнивание. (Это потребовалось более ранней версии спецификации flexbox, но она изменилась, чтобы больше не требовать, чтобы эти заполнители формировали гибкие элементы. )

Я намерен быстро обновить Firefox в этом аспекте flexbox (здесь ошибка об этом), но в то же время я предлагаю избегать использования абсолютного позиционирования для любого прямого дочернего элемента flexbox, поскольку он работает по-разному в каждом браузере прямо сейчас.

* (UPDATE: теперь исправлено в сборках Firefox. Исправление будет в предварительном порядке находиться в Firefox 52, который, я считаю, Март 2017 года.)