Flexbox在Firefox上無法正常工作，但在Chrome和Safari上可以使用

Question

我正在建立一個嚴重依賴於Flexbox的網站。唯一的問題是，我無法讓它模仿Firefox上的鉻行爲。我看了這篇文章（http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/）

所有這些都非常好，並給出了一些很好的建議，其中沒有一個適合我。我試過設置

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

而我的孩子和父母元素的每一個變化，但無濟於事。我已經加入了一個說明我的問題的CodePen鏈接。當在FF 37.0.2和46.0.1中打開時，它會被完全破壞。在Chrome和Safari中，它看起來很好。

/* 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

的問題是你的前綴順序。

始終將官方屬性（W3C標準）放在列表​​中。

CSS渲染引擎將選擇最後一個適用的屬性。 Firefox正在讀取過去display: flex並選擇了display: -moz-box，這導致了問題。

更多細節：What is the proper way to order vendor prefixes for flexbox?

Answer 2

嘗試改變display財產申報的次序，使得標準是最後一次。我認爲FF是讓-moz前綴屬性覆蓋之前聲明的值。

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;