首頁 >web前端 >css教學 >如何修復 IE10 中的 Flexbox 問題?

如何修復 IE10 中的 Flexbox 問題?

Barbara Streisand
Barbara Streisand原創
2024-11-18 07:54:02424瀏覽

How Can I Fix Flexbox Issues in IE10?

排查 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn