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

Question

Firefox 36 中的 Flexbox 和 space-between 有问题。原因未知 space -between 在 Firefox 中不正确（导致左侧奇怪的边距）但在 Google Chrome.

中完美

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 是一个弹性容器，这给它一个 absolutely-positioned child -- 以及 children 弹性容器的绝对定位 doesn't quite work interoperably yet - 显然 IE（或他们的 next-gen "Spartan"）是目前唯一实现最新 spec-text 的浏览器。

这种样式会破坏您的布局，因为绝对定位的 child 会掉落一个不可见的 0 大小的 "placeholder"，它形成一个 0 大小的弹性项目，并且该弹性项目会影响所有元素的定位其他弹性项目通过参与 space-around 对齐。（这是 earlier version of the flexbox spec 所要求的，但已更改为不再需要这些占位符来形成弹性项目。）

我打算很快将 Firefox up-to-date* 引入 flexbox 的这一方面 (here's the bug on that)，但与此同时，我建议避免在任何直接 child 的 flexbox，因为它现在在每个浏览器中的工作方式都不同。

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

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

Flexbox style "justify-content: space-between" misaligned in Firefox with absolutely positioned child

css

flexbox