Flexbox在Firefox上無法正常運行，但在Chrome和Safari上運行正常

Question

我正在建立一個嚴重依賴flexbox的網站。 唯一的問題是我不能讓它模仿Firefox上的chrome行為。 我查看了CSS-Tricks，SO和本文（ 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 ，這會導致問題。

更多細節： 為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;