在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中运行良好。
答案 0 :(得分:41)
尚未在IE中完全支持Flex布局模式。 IE10实现了规范的“补间”版本,这个版本不是完全新的,但仍然有效。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
这篇CSS-Tricks文章对跨浏览器使用flexbox(包括IE)提出了一些建议: 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/
答案 1 :(得分:38)
正如Ennui所提到的,IE 10支持-ms
前缀版本的Flexbox(IE 11支持它没有前缀)。我在代码中看到的错误是:
display: -ms-flexbox
而不是display: -ms-flex
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;
/**/
}
答案 2 :(得分:9)
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;)