為什麼 Flexbox 在 IE10 中不起作用？

IE10 中Flexbox 版面無效：原因探究

在IE10 中，以下程式碼無法正確運作：

.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;
    flex: auto 1;
}

問題現象：input[type=submit] 的寬度應為31px，而input[type=text] 應佔據 form 中剩餘的可用空間。然而，實際情況是 input[type=text] 的寬度莫名其妙地預設為 263px。

在 Chrome 和 Firefox 中，程式碼可以正常運作。

解釋：

在 IE 中，Flexbox 版面模式尚未得到（完全）本機支援。 IE10 實現的是該規範的「tween」版本，該版本並不完全是最新的，但仍可使用。

本文建議在IE 中使用Flexbox 版面時使用CSS-Tricks 提供的以下技巧：

• 使用Vendor 前綴
• 設定一個明確的flex-direction（即使它是預設值）
• 避免使用過時的屬性（如-webkit-box-flex）

要注意的是，IE10 Flexbox 版面模式是基於 2012 年 3 月的 W3C 草案規範，而最新草案已經更新一年左右。

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