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

【问题标题】：-webkit-box-orient and --webkit-box-flex browser competability-webkit-box-orient 和 --webkit-box-flex 浏览器兼容性
【发布时间】：2013-01-16 22:43:51
【问题描述】：

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

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

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

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

提前致谢。

【问题讨论】：

标签： css html web webkit cross-browser

【解决方案1】：

我在IE10上试了一下，好像还不错。

-ms-flex:1 0 auto;

【讨论】：

【解决方案2】：

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 混合），涵盖了所有规范。有 cmets 显示给定草稿不存在哪些属性或值。

https://gist.github.com/4461470

【讨论】：

它们基本上是一个包含可重用 CSS 的函数。请参阅：sass-lang.com。您不必使用 Sass，但这可能是目前唯一匹配每个草稿中的每个属性/值的文档。
谢谢，我会调查的。

【解决方案3】：

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;

【讨论】：

我已经实现了相同代码的 firefox 和 IE10 版本以及 W3C 特定标准。但似乎它不会做 Firefox 和 IE9 中的预期。（没有测试IE10，因为我在这个工作站上没有它。由于政策无法在此处下载。必须等到公司更新。）
是的，这似乎是正确的。我怀疑你是否有任何运气让它与 IE9 及以下版本一起工作。不幸的是，IE 9 及更低版本不完全支持 CSS3 属性。 9 支持不少，8 及以下支持很少。