為什麼 Flexbox 在 IE10 表現異常？

IE10 中的 Flexbox 相容性問題

在 IE10 中使用 Flexbox 時，您可能會遇到意外行為。雖然支援 Flexbox 語法，但它在「補間」規範下運行，這與較新的實作不同。

在您的程式碼中，為 input[type=text] 指定 flex 屬性時會出現問題。 IE10 需要稍微不同的語法，您應該使用 -ms-flex 而不是 flex 來實現跨瀏覽器相容性。此外，請確保包含所有必要的供應商前綴以支援舊版瀏覽器。

以下是應解決問題的更新 CSS：

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

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

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

以上是為什麼 Flexbox 在 IE10 表現異常？的詳細內容。更多資訊請關注PHP中文網其他相關文章！