[英]Flexbox not working properly on Firefox but okay on Chrome & Safari
I'm building a website that relies heavily on flexbox. 我正在建立一个严重依赖flexbox的网站。 Only problem is that I cannot get it to mimic the chrome behaviour on Firefox.
唯一的问题是我不能让它模仿Firefox上的chrome行为。 I looked on CSS-Tricks, SO and at this article ( http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ )
我查看了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.
我已经包含了一个说明我的问题的CodePen链接。 When opened in FF 37.0.2 AND 46.0.1, it is completely broken.
在FF 37.0.2和46.0.1中打开时,它完全坏了。 In Chrome and Safari, it looks just fine.
在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 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. 始终将官方财产(W3C标准)放在列表的最后。
The CSS rendering engine will select the last applicable property. CSS渲染引擎将选择最后一个适用的属性。 Firefox is reading past
display: flex
and selecting display: -moz-box
, which is causing the problem. Firefox正在读取过去的
display: flex
并选择display: -moz-box
,这会导致问题。
More details: What is the proper way to order vendor prefixes for flexbox? 更多细节: 为flexbox订购供应商前缀的正确方法是什么?
Try changing the order of the display
property declarations such that the standard is last. 尝试更改
display
属性声明的顺序,使标准最后。 I think FF is letting that -moz
prefixed property overwrite the previously declared value(s). 我认为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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.