/ / Flexbox štýl "justify-content: space-medzi" nesprávne zarovnaný v Firefoxe s absolútne umiestneným child-css, flexbox

Flexbox štýl "justify-content: space-medzi" nesprávne zarovnaný vo Firefoxe s absolútne umiestneným child-css, flexbox

Máte problém s flexboxu a Priestor medzi nimi v prehliadači Firefox 36. Z dôvodov neznámych priestorov nie je v prehliadači Firefox správne (čo spôsobuje podivné okraje vľavo), ale je perfektné v prehliadači Google Chrome.

Zachytenie obrazovky Chrome

Záber obrazovky prehliadača 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>

odpovede:

14 pre odpoveď č. 1

Problém je z tohto štýlu na vašej poslednej stránke:

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

(čo si myslím, že pochádza z pôvodnej otázky "&: pred").

.form-status je kontajner na ohyb, čo mu dáva absolútne umiestnené dieťa - a absolútnu polohu pre deti flexových kontajnerov ešte stále nefunguje interoperabilne - Zdá sa, že IE (alebo ich ďalšia generácia "Spartan") je jediným prehliadačom na implementáciu najnovšieho spec-textu na túto práve teraz.

Tento dizajn preruší vaše rozloženie, pretožeabsolútne umiestnené dieťa klesne neviditeľným "zástupným" 0 veľkostným dielom, ktorý tvorí flexibilnú položku o veľkosti 0 a že flex položka ovplyvňuje umiestnenie všetkých ostatných flexových prvkov prostredníctvom účasti na space-around zarovnanie. (Toto bolo vyžadované skoršia verzia špecifikácie flexboxu, ale zmenila sa tak, aby už tieto zástupné symboly nepožadovali, aby vytvárali flexibilné položky.)

Mám v úmysle priniesť Firefoxu najnovšiemu o tomto aspekte flexboxu čoskoro (tu je tu chyba), ale medzitým by som chcel vyhnúť používaniu absolútneho umiestnenia na akomkoľvek priamom dieťati flexboxu, pretože práve teraz funguje inak v každom prehliadači.

* (UPDATE: Toto je teraz pevné v kmeňoch Firefoxu. Oprava bude predbežne v programe Firefox 52, čo verím lodiam v marci 2017.)