Internet Explorer 10 不对内联元素应用 Flexbox

Question

根据 弹性盒规格 跨度弹性项目（弹性容器的子项）应转换为 display:block。Internet Explorer 10 不应用此转换，因此 Flexbox 不适用于跨度（内联）元素。

这里有一个 代码笔 我的意思

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

Answer 1

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

以下是 CSS Flexbox 工作草案中的相关规范文本块，它在 2012 年底发布 IE10 时就已存在：

Flex 布局算法对 Flex 项目生成的框进行操作。以下各项均成为弹性项目：

[...]

4.一个匿名块，包裹着一系列连续的非替换内联子元素。

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

A span 是“不可替换的内联子元素”。所以 IE10 封装了 span （以及任何相邻的内联内容）在匿名块中（匹配旧规范）而不是转换它 到 一个块（根据新规范）。

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

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

Answer 2

你试过这个属性吗？

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