-webkit-box-orient和--webkit-box-flex浏览器兼容性

Question

我有跨浏览器兼容性问题，我正在尝试寻找IE9 / IE10和Firefox的解决方案。

nav {
    -webkit-box-orient: horizontal;
}
nav a {
    -webkit-box-flex:1;
}

上面的代码似乎只适用于Chrome。 Mozilla是否有针对此的浏览器特定代码？ IE是否有针对此的浏览器特定代码？

此代码来自的网站是http://www.daven.nl/

提前致谢。

Answer 1

IE9根本不支持flexbox。不同的浏览器供应商基本上实现了3种不同的规范。

• 2012年9月候选人推荐（http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/）
• 2012年3月工作草案（http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/）
• 2009年7月工作草案（http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/）

从Firefox 20开始，您只需要关注2012年的规格：IE10遵循3月份的规格，其他所有人都遵循9月份的规格。如果您想在2009年草案之后支持浏览器，请注意Mozilla不支持flex-wrap。我知道在最近的Firefox版本中，这仍然是一个抱怨，它对新草案有实验支持（默认情况下禁用）。不确定是否应该在版本20中修复它。

我在Sass中写了一系列mixin（取决于2 Compass mixins），它将涵盖所有规格。有评论显示给定草稿不存在哪些属性或值。

https://gist.github.com/4461470

Answer 2

Firefox使用-moz和IE使用-ms作为其供应商前缀。但是大多数版本都不支持-ms我相信IE 10是唯一支持-ms的版本。

http://www.w3schools.com/cssref/css3_pr_box-orient.asp

http://www.w3schools.com/cssref/css3_pr_box-flex.asp

 /* Firefox */
 display:-moz-box;
 -moz-box-orient:horizontal;

-moz-box-flex:2.0; 

我会在IE 10中尝试这个，看它是否有效。根据w3，它看起来并不像它在IE中有很多支持。但值得一试。

 display:-ms-box;
 -ms-box-orient:horizontal;

-ms-box-flex:2.0; 

Answer 3

我在IE10上尝试这个，看起来很好。

-ms-flex:1 0 auto;