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，因為它們基本上已經損壞，將被刪除，而不是固定的。