为什么 IE10 中的 Flexbox 渲染宽度不可预测？

IE10 Flexbox 难题：跨浏览器之谜

对 IE10 中 Flexbox 的神秘行为感到沮丧？不只是你。尽管 Flexbox 在现代浏览器中得到广泛采用，但 IE10 中的 Flexbox 支持仍有很多不足之处。

一个典型的例子是表单布局问题：

`

.flexbox form { <pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

}

.flexbox 表单输入[type=submit] {

width: 31px;

}

.flexbox 表单输入[type=text ] {

width: auto;
flex: auto 1;

}

`

理论上，这个布局应该渲染一个固定宽度为 31px 的 input type="submit"，而 input type= “文本”无缝地填充了剩余空间。然而，在 IE10 中，输入 type="text" 顽固地默认为令人困惑的 263px 宽度。

问题的症结在于 IE10 对 Flexbox 规范的部分实现。它支持该规范的中间版本，该版本缺乏某些功能。不幸的是，这些缺失的功能使布局无法按预期运行。

要解决此问题，请考虑 siguientes 方法：

• 使用 CSS 前缀： IE10 响应某些 CSS 前缀，例如 -ms-flex。
• 使用 CSS Polyfill：像 Flexboxie 这样的 Polyfill 可以模拟 IE 中的 Flexbox 功能。
• 回退到以前的布局方法：考虑采用传统的布局方法（例如，浮动或表格）以兼容 IE10。

请继续关注浏览器更新，因为未来版本的 IE 可能会引入更强大的 Flexbox 支持。在那之前，这些策略可以帮助您解决 IE10 中的 Flexbox 跨浏览器难题。

以上是为什么 IE10 中的 Flexbox 渲染宽度不可预测？的详细内容。更多信息请关注PHP中文网其他相关文章！