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.
3 ответов
режимы компоновки Flex еще не (полностью) поддерживаются в IE. IE10 реализует версию спецификации" tween", которая не является полностью новой, но все еще работает.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
в этой статье CSS-Tricks есть некоторые советы по кросс-браузерному использованию flexbox (включая IE): http://css-tricks.com/using-flexbox/
edit: после немного больше исследований, IE10 flexbox режим компоновки реализован текущий к марту 2012 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 поддерживает ее неподготовленной). Ошибки я вижу в вашем коде:
- вы должны есть!--2--> вместо
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:
(Tween) означает нечетный неофициальный синтаксис из [2012] (например, display: flexbox;)