Internet Explorer 10不適用內聯元素上的flexbox

Question

根據flexbox specs，跨度柔性項目（柔性容器的子項）應轉換爲display:block。 Internet Explorer 10不適用此轉換，因此flexbox不適用於跨度（內聯）元素。

這裏我的意思

我可以只使用div的，但是我想知道這是否是一個資源管理器的bug和codepen如果不是改變html代碼更好的修復。

Answer 1

這只是因爲（工作草案）flexbox規範在IE10發佈後發生了變化。

下面是來自CSS Flexbox的工作規範草案文本的相關塊，因爲它的存在時，IE10發佈了對2012年底：

柔性佈局算法由柔性物品產生箱操作。下列各變得柔性項：

[...] 

4.一種匿名塊周圍非替換內聯的子元素的連續運行纏繞。

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

甲span是一個 「非替換直列子元素」。因此，IE10將span（和任何相鄰的內聯內容）封裝在一個匿名塊中（與舊規範相匹配），而不是將其轉換爲到塊（根據新規範）。

我懷疑微軟不希望在發佈後改變這個功能，以避免破壞已經編碼的內容，以期在IE10中發生特定的行爲。

所以，如果你想寫Flexbox的內容的作品在IE10 都和更新的瀏覽器版本，它可能是最好不要依賴於這種特殊的行爲。 （請明確表示;將這些跨度更改爲div，或者給它們display:block，因爲您知道它們將在新瀏覽器中轉換爲塊。）

Answer 2

你試過這個屬性嗎？

display:-ms-inline-flexbox;（用於內聯flexbox容器）。