flexbox在Firefox和Chrome中的行为不一致？

Question

我尝试将flexbox用于导航栏，如下面的jsfiddle链接所示

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

它像在Firefox下的魅力一样工作-如jsfiddle页面所示，但在chrome中，第一个图标位于导航栏的中心，但是第二个图标从导航栏踢出。

我知道

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

和

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

两种浏览器的行为不同，但是如何在两种浏览器中强制执行完全相同的行为？

Answer 1

在该测试用例中，您没有在Firefox或Chrome中使用实际的CSS flexbox。 您在Firefox中使用的是XUL框，而在Chrome中使用的是一个非常古老且有错误的“ flexbox”草稿。 它们的行为和当前的flexbox草案（ http://dev.w3.org/csswg/css-flexbox/）完全不同。

我建议不要使用-moz-box或-webkit-box，因为它们基本上已经损坏，将被删除，而不是固定的。