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上提供了一个链接，展示了我的问题。在Firefox 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

- colinmcp

---

你的各个浏览器都存在冲突的显示设置。你是想使用 display: box; 还是 display: flex？从代码中删除 display: box; 属性即可解决此问题。 - TylerH

“display: box;”是2009年规范的属性值。在2011年，它被改为“display: flex;”，浏览器也随之改变，但它们通常包括对旧属性的支持，以保持向后兼容性，以便支持使用旧代码的网站。 - TylerH

此外，真正引起问题的不是属性本身，而是您在代码中的前缀排序方式。您无需删除任何内容。事实上，删除并不能真正解决问题，因为这可能会在另一个浏览器中再次发生。更可靠的解决方案应该修复排序方式。我已发布了一个答案。 - Michael Benjamin

@TylerH，正如我在我的答案中提到的那样，CSS会选择应用的最后一个属性。这就是这个问题的根源。通过删除前缀版本，您已经解决了此实例的问题。但是，如果任何前缀版本适用于其他浏览器，则将出现相同的问题。最好始终将W3C属性放在列表的最后。 - Michael Benjamin

@Michael_B 我明白了；我原以为你是指其他浏览器拾取 'display: box' 属性。 - TylerH

Answer 1

问题出在你的前缀顺序上。

始终将官方属性（W3C标准）放在列表的最后。

CSS渲染引擎会选择最后一个适用的属性。Firefox在读取了 "display: flex"之后，会选择 "display: -moz-box"，这就导致了问题。

更多细节请参见：如何为flexbox正确排序供应商前缀？

- Michael Benjamin

Answer 2

尝试更改display属性声明的顺序，使标准属性最后声明。我认为Firefox会让-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;

- Ito Pizarro