Firefox 和 chrome 中 flexbox 的不统一行为？

Posted 2023-03-05

【中文标题】Firefox 和 chrome 中 flexbox 的不统一行为？

【英文标题】：non-uniform behavior of flexbox in firefox and chrome?

【发布时间】：2013-10-04 13:34:14

【问题描述】：

我尝试使用 flexbox 作为导航栏，如下面的 jsfiddle 链接所示

http://jsfiddle.net/qq9pn/5/

它在 Firefox 下就像一个魅力——如 jsfiddle 页面所示，但在 chrome 中，第一个图标位于导航栏的中心，但第二个图标被踢出导航栏。

我知道

-webkit-box-flex:1.0; /* Chrome */

和

-moz-box-flex:1.0; /* Firefox */

在两个浏览器中表现不同，但我如何才能在两个浏览器中强制执行完全相同的 flexbox 行为？

【问题讨论】：

只是好奇，您正在测试哪个版本的 Firefox？我摆弄了 jsfiddle，它看起来还不错。此版本对您来说是否正确显示？ jsfiddle.net/qq9pn/6

MDN 在这个主题上有这样的说法：“这个属性是一个非标准的扩展。有一个旧的 CSS3 Flexbox 规范草案定义了一个 box-flex 属性，但是那个草案已经结束了两岁，后来被取代了。”我认为更好的方法是使用其他 flex 属性。

Flexible box model - display : flex, box, flexbox?的可能重复

@D.Alexander 感谢您找到丢失的 ，尽管这不是问题所在。事实证明，问题是由我分配给封装导航栏的表格的表格属性引起的。我的错。

【参考方案1】：

在该测试用例中，您没有在 Firefox 或 Chrome 中使用实际的 CSS flexbox。您在 Firefox 中使用 XUL 框，在 Chrome 中使用非常陈旧且有缺陷的“flexbox”草案。它们之间的行为完全不同，并且与 http://dev.w3.org/csswg/css-flexbox/ 的当前 flexbox 草案不同

我建议不要使用 -moz-box 或 -webkit-box，因为它们基本上已经很坏了，会被移除，而不是修复。

【讨论】：

但是我应该使用什么替代方法来实现导航栏的类似效果？

***.com/questions/15662578/…

@nye17 是的，肉桂说的。使用display: flex。