Flexbox Stil "justify-Inhalt: Raum-between" falsch ausgerichtet in Firefox mit absolut positionierten Kind

Question

Haben Sie ein Problem mit Flexbox und platz zwischen in Firefox 36. Aus unbekannten Gründen Raum dazwischen in Firefox nicht korrekt ist (der seltsame Rand auf der linken Seite), aber perfekt in Google Chrome.

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

Die Ausgabe von thi ist s Styling auf der endgültigen Seite:

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

(was ich denke, kommt aus dem "&: vor" in Ihrer ursprünglichen Frage).

.form-status ist ein Flex-Container, und das ist es ein absolut positioniertes Kind - und absolute Positionierung für Kinder von Flex-Containern doesn't quite work interoperably yet - anscheinend IE (oder ihre nächste Generation "Spartan") ist der einzige Browser zu Implementiere jetzt den neusten spec-text dazu.

Dieses Design unterbricht Ihr Layout, weil das absolut positionierte Kind einen unsichtbaren 0-dimensionalen "Platzhalter" ablegt, der ein 0-dimensionales Flexelement bildet und dieses Flex-Element die Positionierung aller anderen Flex-Elemente über die Teilnahme an space-around Ausrichtung. (Dies wurde von einem earlier version of the flexbox spec erforderlich, aber es hat sich geändert, diese Platzhalter nicht mehr zu fordern, um Flex-Elemente zu bilden.)

Ich beabsichtige, Firefox * auf diesem Aspekt von flexbox bald zu aktualisieren * (here's the bug on that) , aber in der Zwischenzeit würde ich vorschlagen, die absolute Positionierung auf einem direkten Kind einer Flexbox zu vermeiden, da es in jedem Browser jetzt anders funktioniert.

* (UPDATE:. Dies ist now fixed in Firefox Stamm baut Das Update wird in Firefox 52 vorläufig sein, die ich glaube, Schiffe März 2017.)