Chrome 和 Firefox 的 flexbox 行为差异
Posted
技术标签:
【中文标题】Chrome 和 Firefox 的 flexbox 行为差异【英文标题】：Difference in flexbox behavior between Chrome and Firefox 【发布时间】：2012-10-20 20:28:49 【问题描述】：样本可以在http://jsfiddle.net/GGYtM/找到，这里是所要求的内联代码：
<html>
<style type='text/css>
.flex
/* old syntax */
display: -webkit-box;
display: -moz-box;
/* new syntax */
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
.flex-direction-horizontal
/* old syntax */
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
/* new syntax */
-webkit-flex-direction:raw;
-moz-flex-direction:raw;
-o-flex-direction:raw;
-ms-flex-direction:raw;
flex-direction: raw;
.flex-cross-align-stretch
/* old syntax */
-webkit-box-align:stretch;
-moz-box-align:stretch;
/* new syntax */
-webkit-align-items:stretch;
-moz-align-items:stretch;
-o-align-items:stretch;
-ms-align-items:stretch;
align-items:stretch;
.container
border: 1px solid gray;
padding:5px;
background:#ecd953;
-moz-border-radius: 5px;
border-radius: 5px;
.button
width:70px;
height:50px;
/*margin:5px;*/
background: #1b486f;
color : white;
position:relative;
text-align:center;
padding-top:5px;
.wrap
margin:5px;
</style>
<body>
<div class="flex flex-direction-horizontal flex-cross-align-stretch container" id='root'>
<div class="wrap">
<div id="elem2" class="button">
<span id="txt">2</span>
</div>
</div>
</div>
</body>
</html>
在 Firefox 中，“根”div 元素不会增长到适合父元素的宽度，但会占据适合内容所需的空间——这很完美。 然而，在 Chrome 和 Safari 中，“根”div 元素会增长到占据父容器的整个宽度。 这种差异的原因是什么？理想情况下，我想实现 FF 行为，非常完美。
【问题讨论】：
我发现这实际上是 FF 中的一个错误 - oli.jp/bugs/mozilla/flexbox-display-inline.html 并且 Webkit 的行为是正确的。为了得到想要的结果位置：absolute 可以在根框中添加：jsfiddle.net/GGYtM/3 这里是合并示例，可以在 FF 和 Webkit 中获得所需的结果：jsfiddle.net/GGYtM/4 似乎 FF (v35.0.1) 已修复提出的第一个问题，现在与 Chrome (40.0.2214.93 m) 一致，具有讽刺意味的是，合并后的示例在两种浏览器中不再一致。 【参考方案1】：你使用
display: flex;
但是，如果你不希望它增长到适合父元素的宽度，而是占据适合内容所需的空间，你应该使用
display: inline-flex;
对于较旧的浏览器，您可能需要
display: -moz-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
.flex
/* old syntax */
display: -moz-box;
display: -ms-inline-flexbox;
/* new syntax */
display: -webkit-inline-flex;
display: inline-flex;
.container
border: 1px solid gray;
padding: 5px;
background: #ecd953;
-moz-border-radius: 5px;
border-radius: 5px;
.button
width: 70px;
height: 50px;
background: #1b486f;
color: white;
position: relative;
text-align: center;
padding-top: 5px;
.wrap
margin: 5px;
<div class="flex container">
<div class="wrap">
<div id="elem2" class="button">
<span id="txt">2</span>
</div>
</div>
</div>【讨论】：
以上是关于Chrome 和 Firefox 的 flexbox 行为差异的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Firefox 对待 Helvetica 和 Chrome 的方式不同？
WebAPi - Firefox 和 chrome 中的 CORS
如何让firefox和chrome支持css自定义鼠标样式？IE中用“cursor:url()”属性可以实现，FF、Chrome怎么弄？