css - Flexbox 样式 "justify-content: space-between"在具有绝对定位子项的 Firefox 中未对齐

Question

Firefox 36 中的 Flexbox 和 space-between 有问题。由于未知原因，Firefox 中的空格不正确(导致左侧出现奇怪的边距)但是在谷歌浏览器中完美。

Chrome screen capture

Firefox screen capture

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>  

Answer 1

问题出在您最终页面上的样式:

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

(我认为这来自您原始问题中的“&:before”)。

.form-status 是一个 flex 容器，这给它一个绝对定位的子容器——以及 flex 容器 doesn't quite work interoperably yet 的子容器的绝对定位——显然 IE(或他们的下一代“Spartan”)是唯一要实现的浏览器现在最新的规范文本。

这种样式会破坏您的布局，因为绝对定位的 child 会掉落一个不可见的 0 大小的“占位符”，它形成一个 0 大小的 flex 元素，并且该 flex 元素会通过参与 space-around 影响所有其他 flex 元素的定位结盟。 (这是 earlier version of the flexbox spec 所要求的，但它已更改为不再调用这些占位符来形成 flex 元素。)

我打算尽快在 flexbox 的这一方面( here's the bug on that )使 Firefox 更新*，但与此同时，我建议避免在 flexbox 的任何直接子级上使用绝对定位，因为它可以工作现在每个浏览器都不同。

*(更新:这是 Firefox 主干构建中的 now fixed。修复程序将暂时出现在 Firefox 52 中，我相信它会在 2017 年 3 月发布。)