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