Flexbox风格"证明内容:空格 - 介于两者之间"在Firefox中与未定位的孩子错位

Question

在Firefox 36中存在Flexbox的问题和空间介于两者之间.由于未知空间介于两者之间的原因在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>  

Answer 1

问题来自最终页面上的这种样式:

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

(我认为它来自原始问题中的"&:之前").

.form-status是一个灵活的容器,这给它一个绝对定位的孩子 - 灵活容器的孩子的绝对定位还没有完全互操作 - 显然IE(或他们的下一代"斯巴达")是唯一的浏览器现在就实现最新的规范文本.

这种样式会破坏您的布局,因为绝对定位的子项会删除一个不可见的0大小的"占位符",形成0大小的弹性项目,并且该弹性项目通过参与space-around对齐来影响所有其他弹性项目的定位.(这是早期版本的flexbox规范所要求的,但它已更改为不再要求这些占位符形成弹性项目.)

我打算尽快在Firefox的这个方面带来Firefox最新*(这是错误),但与此同时,我建议避免在flexbox的任何直接子项上使用绝对定位,因为它现在每个浏览器的工作方式都不同.

*(更新:现在已在Firefox干线版本中修复.修复程序暂定在Firefox 52中,我相信2017年3月发布.)