CSS flexbox在IE10中不起作用
在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中尚未（完全）本机支持Flex布局模式。 IE10实现了不完全近代的规范的“补间”版本，但仍然有效。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
这个CSS技巧文章有一些关于跨浏览器使用flexbox（包括IE）的build议： http ://css-tricks.com/using-flexbox/
编辑：经过一番研究，IE10 flexbox布局模式实现了当前到2012年3月的W3C草案规范： http ： //www.w3.org/TR/2012/WD-css3-flexbox-20120322/
最新的草案是近一年左右： http : //dev.w3.org/csswg/css-flexbox/
正如Ennui所说，IE 10支持-ms前缀版本的Flexbox（IE 11支持前置）。 我在代码中看到的错误是：
- 您应该
display: -ms-flexbox而不是display: -ms-flex - 我想你应该指定所有3个
flex值，比如flex: 0 1 auto以避免模糊
所以最终的更新代码是…
.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; /**/ }
IE10使用旧的语法。 所以：
display: -ms-flexbox; /* will work on IE10 */ display: flex; /* is new syntax, will not work on IE10 */
请参阅css-tricks.com/snippets/css/a-guide-to-flexbox ：
（tweener）意味着来自[2012]的奇怪非官方语法（例如display：flexbox;）
请注意，flex项目应显示：block; 在IE10中。
