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

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

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

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

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

Поэтому мой второй вопрос: есть ли "чистая" возможность заставить работать пример "Media Object" в Internet Explorer?

Ответы

Ответ 1

Согласно 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, а не официальным, браузеры имеют тенденцию давать разные результаты, но я думаю, что это изменится в ближайшем будущем.

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

Ответ 2

Используйте другой контейнер flex, чтобы исправить проблему 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 для flex: 0 0 auto, а не 0 1 auto.

Ответ 3

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

Изменения 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/

Ответ 4

Вот пример использования 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>

Ответ 5

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