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中。