Flexbox 在 Firefox 上无法正常工作，但在 Chrome 和 Safari 上正常

Posted 2023-03-06

【中文标题】Flexbox 在 Firefox 上无法正常工作，但在 Chrome 和 Safari 上正常

【英文标题】：Flexbox not working properly on Firefox but okay on Chrome & Safari

【发布时间】：2016-09-15 07:48:32

【问题描述】：

我正在构建一个严重依赖 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

【问题讨论】：

嗯，您的各种浏览器前缀显示设置冲突。你想要display: box; 还是想要display: flex？从您的代码中删除 display: box; 属性将解决此问题。

@TylerH 我的印象是 -moz-box 是 FF 的 flexbox 前缀，但我想我错了！删除它为我解决了这个问题。

display: box; 是 2009 版规范的属性值。它在 2011 年更改为 display: flex;，浏览器也纷纷效仿，但它们通常包括对旧属性的支持，以保持与使用旧代码的网站的向后兼容性。

另外，导致问题的并不是真正的属性本身。这就是您在代码中排序前缀的方式。你不需要删除任何东西。事实上，删除并不能真正解决问题，因为它可能会在另一个浏览器中再次发生。更可靠的解决方案将修复排序。我发布了一个答案。

@Michael_B 我明白了；我以为您指的是其他浏览器获取 display: box 属性。

【参考方案1】：

问题在于前缀的顺序。

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

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

更多详情：What is the proper way to order vendor prefixes for flexbox?

【参考方案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;