如何修復 IE10 中的 Flexbox 問題？

排查 IE10 中的 Flexbox 問題

由於非本機支持，IE10 的 Flexbox 實現可能會出現意外行為。發生這種情況的原因是 IE10 使用過時的 Flexbox 規範版本，從而引入了限制。

要解決這些問題，了解以下內容非常重要：

• Flexbox 在IE 作為原生功能。
• IE10 實作了規範的「補間」版本，對應於 2012 年 3 月的 W3C 草案。
• 目前版本的 Flexbox 規格自此以來經歷了多次修訂然後。

報告的具體問題

報告的Flexbox 在IE10 中無法正常工作的問題源於在旨在兼容IE 的代碼中使用現代Flexbox 語法。具體為：

• display: flex 聲明使用了 IE10 不支援的語法。

解決方案

解決在此問題上，調整程式碼以使用IE10 的「補間」實作中支援的語法，其中包括前綴屬性：

.flexbox form {
    display: -ms-flex;
    -ms-flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -ms-flex;
    -ms-flex: auto 1;
}

這些更改針對IE 的「補間」Flexbox 實現，並應恢復預期的行為。

其他資源

有關跨瀏覽器Flexbox 相容性的更多信息，請參閱以下資源：

• [Mozilla Flexbox 指南](https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
• [CSS-Tricks：使用Flexbox](http://css-tricks.com /using- flexbox/)
• [W3C Flexbox 規範](http://dev.w3.org/csswg/css-flexbox/)

以上是如何修復 IE10 中的 Flexbox 問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！