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;