/ / Styl Flexbox "justify-content: space-between" niewyrównany w Firefoksie z absolutnie pozycjonowanym dzieckiem - css, flexbox

Styl Flexbox "justify-content: space-between" niewyrównany w Firefoksie z absolutnie pozycjonowanym dzieckiem - css, flexbox

Wystąpił problem z Flexbox i przestrzeń pomiędzy w Firefoksie 36. Z powodu nieznanego odstępu między wersjami nie jest poprawny w Firefoksie (powodując dziwny margines po lewej), ale doskonały w Google Chrome.

Przechwytywanie ekranu Chrome

Zrzut ekranu z przeglądarki 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>

Odpowiedzi:

14 dla odpowiedzi № 1

Problem wynika z tej stylizacji na ostatniej stronie:

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

(które według mnie pochodzi z "&: before" w pierwotnym pytaniu).

.form-status to elastyczny pojemnik, który daje mu absolutnie pozycjonowane dziecko - i absolutne pozycjonowanie dla dzieci z elastycznych pojemników nie działa jeszcze w pełni interoperacyjnie - najwyraźniej IE (lub ich następna generacja "Spartan") jest jedyną przeglądarką, która implementuje najnowszy tekst spec-text w tej chwili.

Ta stylizacja łamie twój układ, ponieważAbsolutnie 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 wcześniejsza wersja specyfikacji flexbox, ale zostało zmienione i nie wymaga już od tych elementów zastępczych tworzenia elementów elastycznych).

Mam zamiar wkrótce zaktualizować Firefoksa * na temat tego aspektu flexbox (tutaj jest błąd w tym), ale w międzyczasie, sugeruję unikanie stosowania pozycjonowania absolutnego na dowolnym bezpośrednim elemencie flexbox, ponieważ działa teraz inaczej w każdej przeglądarce.

* (AKTUALIZACJA: To jest teraz naprawione w kompilacjach trunków Firefoksa. Poprawka zostanie wstępnie przyjęta w Firefoksie 52, którą uważam za dostarczoną w marcu 2017 r.)