Flexbox та Internet Explorer 11 (дисплей: ввімкнути <html>?)

117

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

Я попрямував до "Вирішений Flexbox", щоб переглянути деякі приклади. Однак приклад "Sticky Footer", схоже, не працює в Internet Explorer 11. Я трохи розіграв і змусив його працювати, додавши display:flexв <html>та width:100%до<body>

Тож перше моє запитання: чи може хтось пояснити мені цю логіку? Я просто хитався навколо, і це спрацювало, але я не зовсім розумію, чому так працювало ...

Тоді є приклад "Медіа-об'єкт", який працює у всіх браузерах, за винятком - ви здогадалися - Internet Explorer. Я теж спіткнувся з цим, але без жодного успіху.

Моє друге питання: Чи існує "чиста" можливість отримати приклад "Медіа-об'єкт", що працює в Internet Explorer?

— Кодекан
джерело

1

Просто оновлення до цього старого питання: зв'язаний демонстратор працює чудово на IE11. Повинно було виправлено помилку за 3 роки, відколи про це запитали.

— Дарил

151

Відповідно до http://caniuse.com/#feat=flexbox :

"Значення за замовчуванням IE10 та IE11 станом на вересень 2013 року flexє 0 0 auto, ніж 0 1 autoвідповідно до проекту специфікації".

Отже, простими словами, якщо десь у вашому CSS є щось подібне:, flex:1це не перекладається однаково у всіх браузерах. Спробуйте змінити його, 1 0 0і я вважаю, що ви відразу побачите, що воно працює.

Проблема полягає в тому, що це рішення, ймовірно, зіпсує Firefox, але тоді ви можете використовувати деякі хаки, щоб націлити лише на Mozilla та змінити її назад:

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

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

Якщо хтось має кращу відповідь, я хотів би знати!

— Одіссей
джерело

1

Я думаю, це означає, що -ms-flex: 1 0 0;IE10 потребує і 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

Використовуйте інший контейнер 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.

— BeliG
джерело

3

Я знайшов , що я повинен був додати flex-direction: columnдо , .ie-fixMinHeightщоб уникнути побічних ефектів. Якщо у вас немає спеціального HTML-коду, який ви можете використовувати.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, елементам тіла .

Зміни 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

— James Long

Визначення висоти html на 100%, як видається, призводить до того, що вміст mainперестане правильно рости (як мінімум, у хромі); якщо ви додасте достатньо вмісту, це перекриє колонтитул. jsfiddle.net/3tpuryso/65

— FoolishSeth

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

— Одіссеас

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

— Зантер

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 Lu
джерело

15

Будь ласка, надайте додаткову інформацію - замість того, щоб просто вставити свою Html.

— Пітер

7

Хоча ця відповідь, ймовірно, правильна і корисна, бажано, якщо ви додасте разом із нею якесь пояснення, щоб пояснити, як це допомагає вирішити проблему. Це стане особливо корисним у майбутньому, якщо відбудеться якась зміна (можливо непов'язана), яка змусить її перестати працювати, і користувачі повинні зрозуміти, як це колись працювало.

— Ерті Сейдоль

0

Іноді це так просто, як додавання: '-ms-' перед стилем Like -ms-flex-flow: обгортання рядків; щоб він також працював.

— Марсель Грей
джерело

3

Іноді, але в більшості випадків немає;) Давайте

— скидаємо