styl schematu flexbox „justify-zawartość: przestrzeń pomiędzy” wyrównane Firefox z absolutnie umieszczonej dziecka

Question

mieć problem z schematu flexbox i przestrzeni pomiędzy Firefox 36. Ze względu na brak miejsca pomiędzy nimi nie jest poprawna w Firefoksie (powodując dziwny margines po lewej), ale doskonały w 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

Problem jest z THI s stylizacji na ostatniej stronie:

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

(co moim zdaniem pochodzi z „&: przed” w swoim pierwotnym pytaniu).

.form-status to elastyczny pojemnik, który daje mu absolutnie pozycjonowane dziecko - i absolutne pozycjonowanie dla dzieci z elastycznych pojemników doesn't quite work interoperably yet - najwyraźniej IE (lub ich następna generacja "Spartan") jest jedyną przeglądarką zaimplementuj najnowszy spec-tekst w tej chwili.

Ta stylizacja łamie układ, ponieważ bezwzględnie ustawione dziecko upuszcza niewidoczny "element zastępczy" o wielkości 0, który tworzy element elastyczny o rozmiarze 0, a ten element elastyczny wpływa na pozycjonowanie wszystkich innych elementów elastycznych poprzez uczestnictwo w space-around wyrównanie. (Było to wymagane przez earlier version of the flexbox spec, ale zmieniono to na nie wymagające już wywoływania tych elementów zastępczych w celu tworzenia elementów elastycznych).

Mam zamiar zaktualizować Firefoksa * na ten temat fleksografii wkrótce (here's the bug on that) , ale w międzyczasie sugeruję unikanie stosowania bezwzględnego pozycjonowania na dowolnym bezpośrednim potomku flexbox, ponieważ działa teraz inaczej w każdej przeglądarce.

* (UPDATE:. To jest now fixed w Firefox bagażnik buduje poprawka będzie próbnie być w Firefoksie 52, które wierzę statków w marcu 2017 roku)