Question

Firefox 36中的 Flexbox 和空格 - 存在问题。由于原因未知，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
}

（我认为它来自原始问题中的“＆amp;：之前”）。

.form-status是一个灵活容器，它给它一个绝对定位的子项 - 并为灵活容器doesn't quite work interoperably yet的子项提供绝对定位 - 显然是IE（或他们的下一代“Spartan “）是目前唯一实现最新规范文本的浏览器。

这种样式会破坏您的布局，因为绝对定位的子项会删除一个不可见的0大小的“占位符”，形成一个0大小的弹性项目，并且该弹性项目通过参与{弹性项目来影响所有其他弹性项目的定位{1}}对齐。（这是earlier version of the flexbox spec所要求的，但已更改为不再要求这些占位符形成弹性项目。）

我打算尽快在Firefox的这方面使用Firefox（here's the bug on that），但与此同时，我建议避免在flexbox的任何直接子节点上使用绝对定位，因为它现在在每个浏览器中的工作方式不同。

*（更新：在Firefox干线版本中这是now fixed。修复程序暂定在Firefox 52中，我相信2017年3月发货。）

Flexbox风格＆＃34;证明内容：空间 - ＆＃34;在Firefox中未完全定位的孩子未对齐

1 个答案: