flexbox शैली "संरेखित-सामग्री: अंतरिक्ष के बीच" गलत संरेखित Firefox में पूरी तरह से तैनात बच्चे के साथ

Question

फ़ायरफ़ॉक्स 36. में flexbox और अंतरिक्ष के बीच साथ कोई समस्या है कारणों के लिए अज्ञात अंतरिक्ष के बीच फ़ायरफ़ॉक्स में सही नहीं है (बाएं अजीब मार्जिन का कारण बनता है) लेकिन Google क्रोम में बिल्कुल सही है।

Chrome screen capture

Firefox screen capture

सीएसएस

.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; } 
    } 
    } 

} 

एचटीएमएल

<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

मुद्दा थी से है अपने अंतिम पृष्ठ पर रों स्टाइल:

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

(जो मुझे लगता है से आता है "&: इससे पहले कि" अपने मूल प्रश्न में)।

.form-status एक फ्लेक्स कंटेनर है, और यह यह एक बिल्कुल-तैनात बच्चा दे रहा है - और फ्लेक्स कंटेनर doesn't quite work interoperably yet के बच्चों के लिए पूर्ण स्थिति - जाहिरा तौर पर आईई (या उनके अगली पीढ़ी "स्पार्टन") के लिए एक ही ब्राउज़र है अभी उस पर नवीनतम spec-text लागू करें।

यह स्टाइल आपके लेआउट को तोड़ देता है क्योंकि बिल्कुल स्थित बच्चा एक अदृश्य 0-आकार का "प्लेसहोल्डर" छोड़ देता है, जो 0-आकार का फ्लेक्स आइटम बनाता है, और वह फ्लेक्स आइटम अन्य सभी फ्लेक्स आइटमों की स्थिति को प्रभावित करने के माध्यम से प्रभावित करता है space-around संरेखण। (यह earlier version of the flexbox spec द्वारा आवश्यक था, लेकिन यह अब इन प्लेसहोल्डर्स को फ्लेक्स आइटम बनाने के लिए नहीं बदला गया है।)

मैं फ़ायरफ़ॉक्स को अद्यतित * फ्लेक्सबॉक्स के इस पहलू पर जल्द ही लाने का इरादा रखता हूं (here's the bug on that) , लेकिन इस बीच, मैं फ्लेक्सबॉक्स के किसी भी प्रत्यक्ष बच्चे पर पूर्ण स्थिति का उपयोग करने से बचने का सुझाव दूंगा, क्योंकि यह अभी हर ब्राउज़र में अलग-अलग काम करता है।

* (अद्यतन:। यह फ़ायरफ़ॉक्स ट्रंक बनाता में now fixed है ठीक अंतरिम रूप से फ़ायरफ़ॉक्स 52 है, जो मैं मार्च 2017 में जहाजों का मानना ​​है में हो जाएगा)