为什么 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中文网其他相关文章！