Flexbox在Firefox上不能正常工作，但在Chrome浏览器和苹果浏览器 [英] Flexbox not working properly on Firefox but okay on Chrome & Safari
问题描述
所有这些都非常好，并提出了一些很好的建议，没有任何工作为了我。我尝试设置
* {
min-height：0;
min-width：0;
}
而我的子元素和父元素的每一个变体，都无济于事。我已经加入了一个CodePen链接来说明我的问题。当在FF 37.0.2和46.0.1中打开时，它被完全破坏。在Chrome和Safari中，它看起来还不错。
$ b
/ *标题样式* /
#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％;
身高：100％;
display：flex;
display：-webkit-box; / * OLD - iOS 6-，Safari 3.1-6 * /
display：-moz-box; / *旧 - 火狐19 - （马车，但主要是作品）* /
显示：-ms-flexbox; / * TWEENER - IE 10 * /
display：-webkit-flex; / * NEW - Chrome * /
align-items：center;
justify-content：center;
float：left;
}
＃header-nav {
width：66％;
身高：100％;
display：flex;
display：-webkit-box; / * OLD - iOS 6-，Safari 3.1-6 * /
display：-moz-box; / *旧 - 火狐19 - （马车，但主要是作品）* /
显示：-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;
颜色：黑色;
text-decoration：none;
margin：0 10px;
white-space：nowrap;
}
＃header-nav-tabs a：hover {
text-decoration：underline;
$ b @media screen和（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; / *旧 - 火狐19 - （马车，但主要是作品）* /
显示：-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 =headerrole =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>测试网站< / h1>
< p>测试网站说明。< / p>
< / div>
< div id =header-nav-tabs>
< a href =http://www.moorefamilychiropractic.ca>主页< / a>
< a href =http://www.moorefamilychiropractic.ca/about-us>关于我们< / a>
< a href =http://www.moorefamilychiropractic.ca/services>服务< / a>
< a href =http://www.moorefamilychiropractic.ca/reviews>评论< / a>
< a href =http://www.moorefamilychiropractic.ca/blog>博客< / a>
< a href =http://www.chirocorrection.com/moorechiro/target =_ blank =noopener noreferrer>我的ChiroCorrection< / a>
< a href =http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me>整脊如何帮助我？< / a>
< a href =http://www.moorefamilychiropractic.ca/contact-us>联络我们< / a>
< / div>
< / div>
< / header>
http://codepen.io/anon/pen/mPYZGY
解决方案
总是把官方属性（W3C标准）放在列表的最后。
CSS渲染引擎将选择最后一个适用的属性。 Firefox正在读取 display：flex 并选择 display：-moz-box ，这是导致问题的原因。 p>
更多信息：什么是为flexbox订购供应商前缀的正确方法？ a>
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/)
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.
/* 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
解决方案 The problem is the order of your prefixes.
Always put the official property (W3C standard) last in the list.
The CSS rendering engine will select the last applicable property. Firefox is reading past display: flex and selecting display: -moz-box, which is causing the problem.
More details: What is the proper way to order vendor prefixes for flexbox?
这篇关于Flexbox在Firefox上不能正常工作，但在Chrome浏览器和苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
