Internet Explorer 10不对内嵌元素应用flexbox [英] Internet Explorer 10 does not apply flexbox on inline elements

问题描述

根据 flexbox规格，span弹性项目（子项一个flex容器）应该转换为 display：block 。
Internet Explorer 10不会应用此转换，因此flexbox不能在span（内联）元素上工作。

这里a codepen 我的意思

我可以只使用div，但我想知道如果这

解决方案

这只是因为（工作草案）flexbox spec更改，在IE10发布后。

这里是CSS Flexbox工作草案的规范文本的相关块，因为它存在时IE10发布到结束2012：

flex布局算法对由flex项目生成的框进行操作。以下每个变成一个flex项：

  [...] 
  

4。

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

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

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

因此，如果您想编写IE10 和更新的浏览器版本中的它可能最好不要依赖于这种特定的行为。 （显式;将这些跨区改为div，或者给它们 display：block ，因为你知道他们将被转换为更新的浏览器中的块） p>

According to flexbox specs a span flex item (children of a flex container) should be converted into display:block. Internet Explorer 10 does not apply this transformation an thus flexbox does not work on span (inline) elements.

Here a codepen of what I mean

I can just use divs but I would like to know if this is an explorer bug and if there is a better fix than changing the html code.

解决方案

This is just because the (working draft) flexbox spec changed, after IE10 was released.

Here's the relevant chunk of spec text from the CSS Flexbox working draft, as it existed when IE10 was released towards the end of 2012:

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.

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

A span is a "non-replaced inline child element". So IE10 wraps the span (and any adjacent inline content) in an anonymous block (matching the old spec) instead of converting it to a block (per the new spec).

I suspect Microsoft didn't want to change this functionality after release, to avoid breaking content that was already coded to expect a particular behavior in IE10.

So if you want to write flexbox content that works both in IE10 and more recent browser-versions, it's probably best not to depend on this particular behavior. (Be explicit; change these spans to divs, or give them display:block, since you know they're going to be converted to blocks in newer browsers anyway.)

这篇关于Internet Explorer 10不对内嵌元素应用flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！