Flexbox 在 Firefox 上无法正常工作，但在 Chrome & 上可以正常工作苹果浏览器
[英] Flexbox not working properly on Firefox but okay on Chrome & Safari
本文介绍了Flexbox 在 Firefox 上无法正常工作，但在 Chrome & 上可以正常工作苹果浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个严重依赖 flexbox 的网站.唯一的问题是我无法让它模仿 Firefox 上的 chrome 行为.我查看了 CSS-Tricks、SO 和这篇文章 (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)
所有这些都非常好，并提供了一些很好的建议，但没有一个对我有用.我尝试设置
* {最小高度:0；最小宽度:0；}
我的子元素和父元素的每一个变化，但都无济于事.我已经包含了一个说明我的问题的 CodePen 链接.在 FF 37.0.2 AND 46.0.1 中打开时，它完全损坏.在 Chrome 和 Safari 中，它看起来很好.
/* 标题样式 */#标题{宽度:85%；保证金:0 自动；高度:375px；背景颜色:RGBA(252,241,223, 1)；填充:25px 75px 25px 0;font-family: 'Quattrocento Sans', sans-serif;边框半径:3px 3px 0 0;}#header-logo{宽度:33%；高度:100%；显示:弹性；显示:-webkit-box；/* 旧 - iOS 6-, Safari 3.1-6 */显示:-moz-box；/* 旧 - Firefox 19-(有问题但大部分工作)*/显示:-ms-flexbox；/* 补间 - IE 10 */显示:-webkit-flex；/* 新 - 铬 */对齐项目:居中；对齐内容:中心；向左飘浮;}#标题导航{宽度:66%；高度:100%；显示:弹性；显示:-webkit-box；/* 旧 - iOS 6-, Safari 3.1-6 */显示:-moz-box；/* 旧 - Firefox 19-(有问题但大部分工作)*/显示:-ms-flexbox；/* 补间 - IE 10 */显示:-webkit-flex；/* 新 - 铬 */对齐内容:中心；/* 对齐项目:居中；*/弹性方向:列；}#header-nav-tabs{边距顶部:25px；填充顶部:25px；边框顶部:1px 实心 rgba(0,0,0,0.5);}#header-nav-tabs a{字体大小:20px；颜色:黑色;文字装饰:无；边距:0 10px;空白:nowrap；}#header-nav-tabs a:hover{文字装饰:下划线；}@media 屏幕和(最大宽度:680 像素){#标题{高度:自动；文字对齐:居中；填充:25px；显示:弹性；显示:-webkit-box；/* 旧 - iOS 6-, Safari 3.1-6 */显示:-moz-box；/* 旧 - Firefox 19-(有问题但大部分工作)*/显示:-ms-flexbox；/* 补间 - IE 10 */显示:-webkit-flex；/* 新 - 铬 */弹性方向:列；对齐项目:居中；}#header-logo{宽度:自动；高度:自动；}#标题导航{宽度:自动；高度:自动；}#header-nav-tabs a{字体大小:17px；}}
<div id="header-nav"><div id="header-nav-title"><h1>测试地点</h1><p>测试站点的描述.</p>
<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" rel="noopener noreferrer">My ChiroCorrection</a><a href="http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me">脊椎按摩疗法如何帮助我?</a><a href="http://www.moorefamilychiropractic.ca/contact-us">联系我们</a>
</标题>
http://codepen.io/anon/pen/mPYZGY
解决方案
问题在于前缀的顺序.
始终将官方属性(W3C 标准)放在列表的最后.
CSS 渲染引擎将选择最后一个适用的属性.Firefox 正在读取过去的 display: flex 并选择 display: -moz-box，这会导致问题.
更多详情:为 flexbox 订购供应商前缀的正确方法是什么?
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屋！
