根据flexbox specs跨度 Flex 元素(Flex 容器的子项)应转换为 display:block。
Internet Explorer 10 不应用此转换，因此 Flexbox 不适用于跨度(内联)元素。
这里是codepen我的意思是
我可以只使用 div，但我想知道这是否是一个资源管理器错误，以及是否有比更改 html 代码更好的修复方法。
最佳答案
这只是因为(工作草案)flexbox 规范在 IE10 发布后发生了变化。
以下是 CSS Flexbox 工作草案中的相关规范文本 block ，它在 2012 年底发布 IE10 时就已存在:
The flex layout algorithm operates on boxes generated by flex items. Each of the following becomes a flex item:
[...]4. An anonymous block wrapped around a contiguous run of non-replaced inline child elements.
来源:http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items
span 是“不可替换的内联子元素”。因此，IE10 将 span(以及任何相邻的内联内容)包装在一个匿名 block (与旧规范匹配)中，而不是将其转换为一个 block (根据新规范)。
我怀疑 Microsoft 不想在发布后更改此功能，以避免破坏已经编码为在 IE10 中实现特定行为的内容。
因此，如果您想编写在 IE10 和更新的浏览器版本中都可以使用的 Flexbox 内容，最好不要依赖此特定行为。 (要明确；将这些跨度更改为 div，或给它们 display:block，因为您知道它们无论如何都会在较新的浏览器中转换为 block 。)
关于css - Internet Explorer 10 不对内联元素应用 Flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22008135/