/ / Flexbox style "justify-content: space-between" in Firefox bei absolut positioniertem Kind falsch ausgerichtet - css, flexbox

Flexbox-Stil "justify-content: space-between" in Firefox mit absolut positioniertem Kind fehlausgerichtet - css, flexbox

Habe ein Problem mit Flexbox und Leerzeichen dazwischen in Firefox 36. Aus unbekannten Gründen ist Space-Between in Firefox nicht korrekt (verursacht den merkwürdigen Rand auf der linken Seite), aber perfekt in Google Chrome.

Chrome Bildschirm erfassen

Firefox Bildschirm erfassen

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>

Antworten:

14 für die Antwort № 1

Das Problem ist von diesem Styling auf Ihrer letzten Seite:

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

(was ich denke, kommt von der "&: vorher" in Ihrer ursprünglichen Frage).

.form-status ist ein Flex-Container, und das gibt ihm ein absolut positioniertes Kind - und absolute Positionierung für Kinder von Flex-Containern funktioniert noch nicht interoperabel - anscheinend IE (oder ihre nächste Generation "Spartan") ist der einzige Browser, der den neuesten Spezifikationstext dazu gerade jetzt implementiert.

Dieser Stil bricht Ihr Layout, weil dieDas absolut positionierte Kind lässt einen unsichtbaren 0-dimensionalen "Platzhalter" fallen, der einen 0-dimensionalen Flex-Gegenstand bildet, und dieser Flex-Gegenstand beeinflusst die Positionierung aller anderen Flex-Gegenstände über die Teilnahme am space-around Ausrichtung. (Dies wurde von einem benötigt frühere Version der Flexbox-Spezifikation, aber es wurde geändert, um diese Platzhalter nicht mehr zum Erstellen von Flex-Elementen zu veranlassen.)

Ich beabsichtige, Firefox bald auf diesem Aspekt von flexbox auf den neuesten Stand zu bringen (Hier ist der Fehler dabei), aber in der Zwischenzeit würde ich vorschlagen, absolute Positionierung auf einem direkten Kind einer Flexbox zu vermeiden, da es in jedem Browser gerade anders funktioniert.

* (UPDATE: Das ist jetzt behoben in Firefox-Stamm-Builds. Das Update wird vorläufig in Firefox 52 sein, was meiner Meinung nach Schiffe im März 2017 sind.)