css - -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;