Flexbox non funziona correttamente su Firefox ma va bene su Chrome & Safari

Question

Sto costruendo un sito Web che fa molto affidamento su Flexbox. L'unico problema è che non riesco a farlo imitare il comportamento del Chrome su Firefox. Ho guardato su CSS-Tricks, SO e a questo articolo (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)

Tutti questi sono stati molto carini e hanno dato alcuni buoni suggerimenti, nessuno dei quali ha funzionato per me. Ho provato a impostare

* { 
    min-height: 0; 
    min-width: 0; 
} 

E ogni variazione sui miei elementi figlio e genitore, ma senza successo. Ho incluso un collegamento CodePen che illustra il mio problema. Se aperto in FF 37.0.2 AND 46.0.1, è completamente rotto. In Chrome e Safari, sembra perfetto.

/* Header Styles */ 

#header{ 
    width:85%; 
    margin:0 auto; 
    height:375px; 
    background-color:rgba(252,241,223, 1); 
    padding:25px 75px 25px 0; 
    font-family: 'Quattrocento Sans', sans-serif; 
    border-radius:3px 3px 0 0; 
} 


#header-logo{ 
    width:33%; 
    height:100%; 
    display:flex; 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    align-items:center; 
    justify-content:center; 
    float:left; 
} 

#header-nav{ 
    width:66%; 
    height:100%; 
    display:flex; 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    justify-content:center; 
/* align-items:center;*/ 
    flex-direction:column; 
} 
#header-nav-tabs{ 
    margin-top:25px; 
    padding-top:25px; 
    border-top:1px solid rgba(0,0,0,0.5); 
} 

#header-nav-tabs a{ 
    font-size: 20px; 
    color:black; 
    text-decoration:none; 
    margin:0 10px; 
    white-space: nowrap; 
} 

#header-nav-tabs a:hover{ 
    text-decoration:underline; 
} 


@media screen and (max-width: 680px) { 

    #header{ 
     height:auto; 
     text-align:center; 
     padding:25px; 
     display:flex; 
     display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
     display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
     display: -ms-flexbox;  /* TWEENER - IE 10 */ 
     display: -webkit-flex;  /* NEW - Chrome */ 
     flex-direction: column; 
     align-items: center; 
    } 

    #header-logo{ 
     width:auto; 
     height:auto; 
    } 

    #header-nav{ 
     width:auto; 
     height:auto; 
    } 

    #header-nav-tabs a{ 
     font-size:17px; 
    } 


} 

<header id="header" role="banner"> 
<div id="header-logo"> 
    <img src="http://staging.thestarvingsailor.ca/wp-content/uploads/2016/01/Moore-Logo.png" /> 
</div> 

<div id="header-nav"> 

    <div id="header-nav-title"> 
     <h1>Test Site</h1> 
     <p>Description for the test site.</p> 
    </div> 

    <div id="header-nav-tabs"> 
     <a href="http://www.moorefamilychiropractic.ca">Home</a> 
     <a href="http://www.moorefamilychiropractic.ca/about-us">About Us</a> 
     <a href="http://www.moorefamilychiropractic.ca/services">Services</a> 
     <a href="http://www.moorefamilychiropractic.ca/reviews">Reviews</a> 
     <a href="http://www.moorefamilychiropractic.ca/blog">Blog</a> 
     <a href="http://www.chirocorrection.com/moorechiro/" target="_blank" rel="noopener noreferrer">My ChiroCorrection</a> 
     <a href="http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me">How Can Chiropractic Help Me?</a> 
     <a href="http://www.moorefamilychiropractic.ca/contact-us">Contact Us</a> 
    </div> 

</div> 
</header> 

http://codepen.io/anon/pen/mPYZGY

Answer 1

Il problema è l'ordine dei prefissi.

Inserire sempre la proprietà ufficiale (standard W3C) per ultimo nell'elenco.

Il motore di rendering CSS seleziona l'ultima proprietà applicabile. Firefox sta leggendo oltre display: flex e selezionando display: -moz-box, che sta causando il problema.

Maggiori dettagli: What is the proper way to order vendor prefixes for flexbox?

Answer 2

provare a cambiare l'ordine delle dichiarazioni di proprietà display tale che la standard è ultima. Penso che FF stia lasciando che la proprietà con prefisso -moz sovrascriva i valori precedentemente dichiarati.

display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
display: -ms-flexbox;  /* TWEENER - IE 10 */ 
display: -webkit-flex;  /* NEW - Chrome */ 
display:flex;