CSS flexbox 在 IE10 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18019450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS flexbox not working in IE10
提问by JacobTheDev
In IE10, this code isn't working correctly:
在 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;
}
What should happen is that input[type=submit]should be 31px wide, with input[type=text]taking up the rest of the available space within form. What happens is input[type=text]just defaults to 263px for some reason.
应该发生的是，它input[type=submit]应该是 31px 宽，并input[type=text]占用form. 发生的事情input[type=text]只是出于某种原因默认为 263px。
This works fine in Chrome and Firefox.
这在 Chrome 和 Firefox 中运行良好。
采纳答案by Ennui
Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.
IE 尚未（完全）原生支持 Flex 布局模式。IE10 实现了规范的“tween”版本，该版本不是最新的，但仍然有效。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE): http://css-tricks.com/using-flexbox/
这篇 CSS-Tricks 文章对跨浏览器使用 flexbox（包括 IE）有一些建议：http://css-tricks.com/using-flexbox/
edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
编辑：经过更多研究，IE10 flexbox 布局模式实现了当前到 2012 年 3 月 W3C 草案规范：http: //www.w3.org/TR/2012/WD-css3-flexbox-20120322/
The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/
最新的草案是最近一年左右：http: //dev.w3.org/csswg/css-flexbox/
回答by Simon East
As Ennui mentioned, IE 10 supports the -msprefixed version of Flexbox (IE 11 supports it unprefixed). The errors I can see in your code are:
正如 Ennui 提到的，IE 10 支持-msFlexbox的前缀版本（IE 11 支持它不带前缀）。我在您的代码中看到的错误是：
- You should have
display: -ms-flexboxinstead ofdisplay: -ms-flex - I think you should specify all 3
flexvalues, likeflex: 0 1 autoto avoid ambiguity
- 你应该有
display: -ms-flexbox而不是display: -ms-flex - 我认为您应该指定所有 3 个
flex值，flex: 0 1 auto以避免歧义
So the final updated code is...
所以最终更新的代码是......
.flexbox form {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
/* Direction defaults to 'row', so not really necessary to specify */
-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;
/* Flex should have 3 values which is shorthand for
<flex-grow> <flex-shrink> <flex-basis> */
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-o-flex: 1 1 auto;
flex: 1 1 auto;
/* I don't think you need 'display: flex' on child elements * /
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
/**/
}
回答by Ben
IE10 has uses the old syntax. So:
IE10 使用旧语法。所以：
display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */
see css-tricks.com/snippets/css/a-guide-to-flexbox:
请参阅css-tricks.com/snippets/css/a-guide-to-flexbox：
(tweener) means an odd unofficial syntax from [2012] (e.g. display: flexbox;)
(tweener) 表示来自 [2012] 的奇怪的非官方语法（例如 display: flexbox;）
