CSS Flexbox не работает в IE10

В IE10, этот код не работает правильно:CSS Flexbox не работает в 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.

источник

2013-08-02 JacobTheDev

Возможный дубликат [IE гибкая коробка не работает] (http://stackoverflow.com/questions/16487884/ie-flexible-box-model-not-working) – cimmanon

Не применяйте случайные префиксы, не работает из-за нескольких реализаций реализации Flexbox: https://gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon

Поддержка браузера Flexbox: http://stackoverflow.com/a/35137869/3597276 –

Режимы компоновки 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/

редактировать: после того, как немного больше исследований, режим компоновки Flexbox IE10 реализованного тока для марта 2012 W3C проект спецификации: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

самый последний проект на год или так более поздние: http://dev.w3.org/csswg/css-flexbox/

источник

2013-08-02 14:32:57 Ennui

Старая версия поддерживается в IE10, обратите внимание на примечание [1] в указанной вами ссылке. – JacobTheDev

Да, есть некоторые свойства поставщика-префикс flexms -ms-', но, насколько я понимаю, они основаны на устаревшей версии спецификации flexbox CSS3 (если только эта информация MDN не устарела, а это возможно). – Ennui

Мне все равно, если это более старая спецификация, если она работает, по крайней мере частично, тогда все в порядке.Я пытаюсь адаптировать материал из статьи CSS Tricks, которую вы опубликовали, будет отчитываться, если он ее исправляет. – JacobTheDev

Как упоминал Эннуи, 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; 
    /**/ 
}

источник

2015-07-17 06:30:14

Правильно - вы ** не ** нуждаетесь в отображении: flex on children (''). Это ** display: flex ** на содержащем элементе - для переключения flexbox on - и ** flex: ... ** на дочерние элементы, чтобы указать размер и т. Д. –

upvoted, specyng 3 значения, обработанные в моем случае. –

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] (например, дисплей: Flexbox;)

источник

2015-10-22 09:42:50 Ben

(комментарий «первый пост») ссылки только ответы не приветствуются (потому что цели ссылки могут исчезнуть). Хорошо добавлять ссылки, но немного информации (в идеале, чтобы ответить на вопрос) является лучшей практикой. Благодаря!. –

моя до сих пор не работает https://jsfiddle.net/1drzxLa5/4/ – user2814546

Пожалуйста, обратите внимание, что гибкие элементы должны быть дисплей: блок; в IE10.

источник

2017-05-26 05:17:21 rappongy

это очень помогло мне – C0ZEN

так сильно, что это так, но здесь отлично справляется! – AtLeastTheresToast

CSS Flexbox не работает в IE10

ответ

Смежные вопросы