Flexbox и Internet Explorer 11 (отображение: flex в <html>?)

117

Я планирую отказаться от «плавных» макетов и использовать CSS Flexbox для будущих проектов. Я был рад увидеть, что все основные браузеры в их текущих версиях, похоже, поддерживают (так или иначе) flexbox.

Я перешел в раздел «Решено с помощью Flexbox», чтобы посмотреть на несколько примеров. Однако пример «липкого нижнего колонтитула», похоже, не работает в Internet Explorer 11. Я немного поигрался и заставил его работать, добавив display:flexк <html>и width:100%в<body>

Итак, мой первый вопрос: может ли кто-нибудь объяснить мне эту логику? Я просто повозился, и это сработало, но я не совсем понимаю, почему так получилось ...

Затем есть пример «Медиа-объекта», который работает во всех браузерах, кроме, как вы уже догадались, Internet Explorer. Я тоже повозился с этим, но безуспешно.

Поэтому мой второй вопрос: есть ли «чистая» возможность заставить пример «Медиа-объекта» работать в Internet Explorer?

— Kodekan
источник

1

Просто обновление этого старого вопроса: связанная демонстрация отлично работает в IE11. Должно быть, ошибка была исправлена за 3 года с момента запроса.

— Дэрил

151

Согласно http://caniuse.com/#feat=flexbox :

«Значения по умолчанию для IE10 и IE11 flex, 0 0 autoа не 0 1 auto, согласно черновой спецификации, по состоянию на сентябрь 2013 г.»

Проще говоря, если где-то в вашем CSS есть что-то вроде этого:, flex:1это не переводится одинаково во всех браузерах. Попробуйте изменить его на, 1 0 0и я думаю, вы сразу увидите, что -kinda- работает.

Проблема в том, что это решение, вероятно, испортит firefox, но тогда вы можете использовать некоторые хаки, чтобы настроить таргетинг только на Mozilla и изменить его обратно:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Поскольку flexboxэто кандидат W3C, а не официальный, браузеры, как правило, дают разные результаты, но я думаю, что это изменится в ближайшем будущем.

Если у кого-то есть лучший ответ, я хотел бы знать!

— ОДИССЕАС
источник

1

Я думаю, это означает, что IE10 нужен, -ms-flex: 1 0 0;а IE11 flex: 1 0 0;..?

— Эйстейн

19

С Google Chrome 39 это внезапно перестало работать для меня. Мне потребовалось время, чтобы разыскать, но это была спецификация третьей цифры. Chrome 39 не придерживается flex: 1 0 0;. Но flex: 1 0 0%;( обратите внимание на % ) или flex: 1 0 auto;будет работать.

— Эйстейн

Да, это правда, что некоторые из моих дизайнов тоже сломались! Я исправил это, просто изменив его на flex: 1;Я думаю, это зависит от того, что вы собираетесь

— делать

1

Основная проблема IE11 - способ его вычислений flex-basis. Github имеет хорошую дискуссию о том, почему flex:1 0 100%работает в некоторых случаях для IE11 в то время flex: 1 0 0%или даже flex: 1 0 autoработает в других. Вы должны знать содержание заранее.

— P.Brian.Mackey

Из caniuse.com/#feat=flexbox в разделе «Известные проблемы» специально упоминается, что IE 11 требует добавления единицы к третьему аргументу, свойству flex-

— Генри Нео,

49

Используйте другой гибкий контейнер, чтобы исправить min-heightпроблему в IE10 и IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

См. Рабочую демонстрацию .

Не используйте макет flexbox напрямую, bodyпотому что он мешает элементам, вставленным через плагины jQuery (автозаполнение, всплывающее окно и т. Д.).
Не используйте height:100%или height:100vhна своем контейнере, потому что нижний колонтитул будет прилипать к нижней части окна и не будет адаптироваться к длинному контенту.
Используйте flex-grow:1вместо того, чтобы flex:1вызывать значения IE10 и IE11 по умолчанию для flexare 0 0 autoи not 0 1 auto.

— Belig
источник

3

Я нашел , что я должен был добавить flex-direction: columnк , .ie-fixMinHeightчтобы избежать побочных эффектов. Если у вас нет специального HTML для IE, вы можете использовать.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Марк Хорган,

Я знаю, что этому 2 года, но спасибо! Я следил за этим stackoverflow.com/a/24979148/359157 и постоянно боролся, пытаясь выяснить, почему IE был остановлен, в то время как Edge и Chrome работали безупречно. heightПротив min-heightбыл ключ.

— TyCobb

39

Вам просто нужно flex:1; Это устранит проблему для IE11. Я второй Одиссей. Дополнительно присвойте 100% высоту html, элементам body .

Изменения CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

рабочий URL: http://jsfiddle.net/3tpuryso/13/

— Ашок Кумар Гупта
источник

Не могли бы вы подробнее объяснить эту проблему: есть ли «чистая» возможность заставить пример «Медиа-объекта» работать в IE?

— Ашок Кумар Гупта

1

У меня это работает. Одна вещь, которую я обнаружил (потому что это меня поймало), заключается в том, что если у вас есть содержащий элемент, display: flex;стили и связанные должны применяться как к bodyконтейнеру, так и к контейнеру: jsfiddle.net/Skateside/nezdrrkr

— Джеймс Лонг,

Установка высоты html на 100%, кажется, приводит к тому, что содержимое mainперестает расти должным образом (по крайней мере, в chrome); если вы добавите достаточно контента, он выйдет за нижний колонтитул. jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth так, как сейчас, вы в основном говорите, что он вырастет до 100%, а не на пиксель больше. Вы должны установить , htmlчтобы min-height: 100%вместо того , чтобы следовать вместе с вашим контентом

— ОДИССЕАС

Спасибо! То, что мне не хватало, на самом деле не было ни одним из атрибутов flex, а было высотой: 100% в содержащем элементе (который для меня был div .pusher, потому что мой сайт включает адаптивную боковую панель).

— zanther

0

Вот пример использования flex, который также работает в Internet Explorer 11 и Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

Развернуть фрагмент

— BadTree Лу
источник

15

Пожалуйста, дайте дополнительную информацию - вместо того, чтобы просто вставлять ваш Html.

— Питер

7

Хотя этот ответ, вероятно, правильный и полезный, желательно, чтобы вы включили вместе с ним некоторые пояснения, чтобы объяснить, как он помогает решить проблему. Это станет особенно полезным в будущем, если произойдет изменение (возможно, не связанное с этим), из-за которого он перестанет работать, и пользователям необходимо понять, как оно когда-то работало.

— Erty Seidohl

0

Иногда это так же просто, как добавить: '-ms-' перед стилем Like -ms-flex-flow: row wrap; чтобы он тоже работал.

— Марсель Грей
источник

3

Иногда, но в большинстве случаев нет;) Давайте глобально

— откажемся от