Я планирую отказаться от «плавных» макетов и использовать CSS Flexbox для будущих проектов. Я был рад увидеть, что все основные браузеры в их текущих версиях, похоже, поддерживают (так или иначе) flexbox.
Я перешел в раздел «Решено с помощью Flexbox», чтобы посмотреть на несколько примеров. Однако пример «липкого нижнего колонтитула», похоже, не работает в Internet Explorer 11. Я немного поигрался и заставил его работать, добавив display:flex
к <html>
и width:100%
в<body>
Итак, мой первый вопрос: может ли кто-нибудь объяснить мне эту логику? Я просто повозился, и это сработало, но я не совсем понимаю, почему так получилось ...
Затем есть пример «Медиа-объекта», который работает во всех браузерах, кроме, как вы уже догадались, Internet Explorer. Я тоже повозился с этим, но безуспешно.
Поэтому мой второй вопрос: есть ли «чистая» возможность заставить пример «Медиа-объекта» работать в Internet Explorer?
источник
Ответы:
Согласно http://caniuse.com/#feat=flexbox :
«Значения по умолчанию для IE10 и IE11
flex
,0 0 auto
а не0 1 auto
, согласно черновой спецификации, по состоянию на сентябрь 2013 г.»Проще говоря, если где-то в вашем CSS есть что-то вроде этого:,
flex:1
это не переводится одинаково во всех браузерах. Попробуйте изменить его на,1 0 0
и я думаю, вы сразу увидите, что -kinda- работает.Проблема в том, что это решение, вероятно, испортит firefox, но тогда вы можете использовать некоторые хаки, чтобы настроить таргетинг только на Mozilla и изменить его обратно:
Поскольку
flexbox
это кандидат W3C, а не официальный, браузеры, как правило, дают разные результаты, но я думаю, что это изменится в ближайшем будущем.Если у кого-то есть лучший ответ, я хотел бы знать!
источник
-ms-flex: 1 0 0;
а IE11flex: 1 0 0;
..?flex: 1 0 0;
. Ноflex: 1 0 0%;
( обратите внимание на % ) илиflex: 1 0 auto;
будет работать.flex: 1;
Я думаю, это зависит от того, что вы собираетесьflex-basis
. Github имеет хорошую дискуссию о том, почемуflex:1 0 100%
работает в некоторых случаях для IE11 в то времяflex: 1 0 0%
или дажеflex: 1 0 auto
работает в других. Вы должны знать содержание заранее.Используйте другой гибкий контейнер, чтобы исправить
min-height
проблему в IE10 и IE11:HTML
CSS
См. Рабочую демонстрацию .
body
потому что он мешает элементам, вставленным через плагины jQuery (автозаполнение, всплывающее окно и т. Д.).height:100%
илиheight:100vh
на своем контейнере, потому что нижний колонтитул будет прилипать к нижней части окна и не будет адаптироваться к длинному контенту.flex-grow:1
вместо того, чтобыflex:1
вызывать значения IE10 и IE11 по умолчанию дляflex
are0 0 auto
и not0 1 auto
.источник
flex-direction: column
к ,.ie-fixMinHeight
чтобы избежать побочных эффектов. Если у вас нет специального HTML для IE, вы можете использовать.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }
height
Противmin-height
был ключ.Вам просто нужно
flex:1
; Это устранит проблему для IE11. Я второй Одиссей. Дополнительно присвойте 100% высоту html, элементам body .Изменения CSS:
рабочий URL: http://jsfiddle.net/3tpuryso/13/
источник
display: flex;
стили и связанные должны применяться как кbody
контейнеру, так и к контейнеру: jsfiddle.net/Skateside/nezdrrkrmain
перестает расти должным образом (по крайней мере, в chrome); если вы добавите достаточно контента, он выйдет за нижний колонтитул. jsfiddle.net/3tpuryso/65html
чтобыmin-height: 100%
вместо того , чтобы следовать вместе с вашим контентомВот пример использования flex, который также работает в Internet Explorer 11 и Chrome.
HTML
источник
Html
.Иногда это так же просто, как добавить: '-ms-' перед стилем Like -ms-flex-flow: row wrap; чтобы он тоже работал.
источник