Internet Explorer 10 不对内联元素应用 flexbox答案

【问题标题】：Internet Explorer 10 does not apply flexbox on inline elementsInternet Explorer 10 不对内联元素应用 flexbox
【发布时间】：2014-03-27 07:38:16
【问题描述】：

根据flexbox specs，span flex 项（flex 容器的子项）应转换为display:block。 Internet Explorer 10 不应用此转换，因此 flexbox 不适用于 span（内联）元素。

这里是codepen 我的意思

我可以只使用 div，但我想知道这是否是资源管理器错误，以及是否有比更改 html 代码更好的修复方法。

【问题讨论】：

标签： css internet-explorer inline html flexbox

【解决方案1】：

这只是因为（工作草案）flexbox 规范在 IE10 发布后发生了变化。

这是来自 CSS Flexbox 工作草案的相关规范文本块，它存在于 2012 年底发布 IE10 时：

弹性布局算法对弹性项目生成的盒子进行操作。以下每一项都成为一个弹性项目：
[...]
4。一个匿名块，包裹着连续运行的非替换内联子元素。

来源：http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items

span 是“不可替换的内联子元素”。因此 IE10 将span（和任何相邻的内联内容）包装在一个匿名块中（匹配旧规范），而不是将其转换为一个块（根据新规范）。

我怀疑 Microsoft 不想在发布后更改此功能，以避免破坏已经编码为预期 IE10 中的特定行为的内容。

因此，如果您想编写在 IE10 和更新的浏览器版本中工作的 flexbox 内容，最好不要依赖这种特定行为。（要明确；将这些跨度更改为 div，或给它们display:block，因为您知道它们无论如何都会在较新的浏览器中转换为块。）

【讨论】：

明确地说，IE 遵循草案规范而不是最终版本。规范并没有从他们那里改变。其他浏览器更新更频繁，能够赶上，而 IE 一如既往地落后。
我编辑了我的帖子，在第一句话中提到了“工作草案”，并删除了“out from under”；希望这能让它更清晰、更中立。（另外，你提到了“最终版本”——还没有“最终版本”。CSSWG 上仍然有（微小的）行为改变被提议/讨论。dev.w3.org/csswg/css-flexbox 有最新的编辑草稿（最近更新了几天前），而且我知道还有一些尚未实现的拟议更改。）

【解决方案2】：

你试过这个属性吗？

display:-ms-inline-flexbox;（用于内联 flexbox 容器）。

【讨论】：

在我的情况下，孩子是内联而不是父母。这不起作用。