Html Flexbox 在 Firefox 上无法正常工作，但在 Chrome 和 Safari 上正常
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37306138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox not working properly on Firefox but okay on Chrome & Safari
提问by colinmcp
I'm building a website that relies heavily on flexbox. Only problem is that I cannot get it to mimic the chrome behaviour on Firefox. I looked on CSS-Tricks, SO and at this article (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)
我正在构建一个严重依赖 flexbox 的网站。唯一的问题是我无法让它模仿 Firefox 上的 chrome 行为。我查看了 CSS-Tricks、SO 和这篇文章（http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/）
All these were very nice and gave some good suggestions, none of which worked for me. I tried setting
所有这些都非常好，并提供了一些很好的建议，但没有一个对我有用。我试过设置
* {
min-height: 0;
min-width: 0;
}
And every variation on my child and parent elements, but to no avail. I have included a CodePen link that illustrates my problem. When opened in FF 37.0.2 AND 46.0.1, it is completely broken. In Chrome and Safari, it looks just fine.
以及我的孩子和父母元素的每一个变化，但无济于事。我已经包含了一个说明我的问题的 CodePen 链接。在 FF 37.0.2 AND 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>
回答by Michael Benjamin
The problem is the order of your prefixes.
问题是前缀的顺序。
Always put the official property (W3C standard) last in the list.
始终将官方属性（W3C 标准）放在列表的最后。
The CSS rendering engine will select the last applicable property. Firefox is reading past display: flexand selecting display: -moz-box, which is causing the problem.
CSS 渲染引擎将选择最后一个适用的属性。Firefox 正在阅读过去display: flex并选择display: -moz-box，这导致了问题。
More details: What is the proper way to order vendor prefixes for flexbox?
回答by Ito Pizarro
Try changing the order of the displayproperty declarations such that the standard is last. I think FF is letting that -mozprefixed property overwrite the previously declared value(s).
尝试更改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;
