Решение проблем Flexbox в Internet Explorer 11: подробный анализ
Быстрый ответ
Для корректной работы flexbox в IE11 следует использовать префиксы -ms и избегать использования сокращенных свойств. Установите display: -ms-flexbox;
и display: flex;
, добавьте к flex-direction
его эквивалент -ms-flex-direction
. Задайте min-height: 100vh;
для полноэкранного контейнера. Вот пример:
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.item {
-ms-flex: 1;
flex: 1;
}
Это обеспечит стабильность элементов на основе flex в IE11.
Устранение различий между браузерами
Быстрые исправления для поддержки flex в IE
У IE10 и IE11 особенная интерпретация свойства flex
. В отличие от других браузеров, где по умолчанию используется flex: 1 1 0%
или flex: auto
, IE11 выбирает flex: 0 0 auto
. Для обеспечения единообразия устанавливайте параметры сжатия и расширения flex-элементов явно:
.item {
-ms-flex: 1 0 0; /* Это выглядит непривычно, но для IE11 это работает */
flex: 1 0 0;
}
Вертикальное выравнивание и правильное отображение
При вертикальном расположении с flex-direction: column
будьте внимательны к особенностям IE11, используя min-height
. Это особенно важно для вертикальных компоновок:
.vertical-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh; /* Это гарантирует заполнение всего экрана */
}
Работа с Mozilla и настройка высот
Особенности Mozilla
Используйте обходные пути, такие как @-moz-document url-prefix()
, чтобы Firefox не применял стили, предназначенные для IE, которые могут вызвать проблемы:
@-moz-document url-prefix() {
.item {
flex: 1; /* И Firefox снова начинает слушать нас */
}
}
Решение для "прилипающих" нижних колонтитулов
Если нижний колонтитул должен "прилипать", а содержимое контента — растягиваться, то в этом может помочь flex-grow:1
:
.content {
-ms-flex-positive: 1;
flex-grow: 1; /* Это решение для 'прилипающего' нижнего колонтитула */
}
Визуализация
Думайте о Flexbox в IE11 как о расставлении книг на полке:
Полка современных браузеров (📚🆕) – каждая книга занимает своё место, как в библиотечной утопии! [📘][📗][📙][📔]
Полка IE11 (📚👴) – книги могут перевернуться без поддержки: [📘] <Подпорка IE11> [📗][📙][📔]
В IE11 <html display:flex>
играет роль полки, а Flexbox — книг. Дополнительные настройки (исправления для IE11) помогут сохранить порядок.
Адаптация Flexbox к адаптивным макетам
Адаптивность и проблема переноса в IE11
Проблемы с переносом элементов в IE11 можно решить через -ms-flex-flow
:
.wrapping-container {
display: -ms-flexbox; /* Flexbox в стиле IE */
display: flex;
-ms-flex-flow: row wrap; /* И все элементы на своих местах! */
flex-flow: row wrap;
}
Полифиллы как решение для поддержки старых браузеров
Можно использовать полифиллы или запасные стили для поддержки в старых браузерах. С помощью функции обнаружения, например, через Modernizr, можно создавать условные стили:
.no-flexbox .container {
/* Запасные стили на случай, если flexbox не поддерживается */
}
Тщательное тестирование в различных браузерах и диагностические инструменты
Тестирование в разных браузерах — залог качества
Обязательно проводите тестирование ваших макетов в таких браузерах как IE11, Chrome, Firefox, Safari и других. Это позволит обнаружить непредвиденные особенности и ошибки.
Инструменты совместимости — надёжный путеводитель по совместимости функций
Для проверки поведения Flexbox в разных браузерах воспользуйтесь сайтом caniuse.com и другими информационными ресурсами.
Полезные материалы
- GitHub – philipwalton/flexbugs — подборка проблем flexbox и их решений для IE 11.
- Can I use — таблица совместимости flexbox с различными браузерами.
- Полное руководство по Flexbox от CSS-Tricks — все об flexbox.
- Документация по CSS Flexbox Layout на MDN — официальное руководство по flexbox.
- CSS Flexible Box Layout Module Level 1 — стандарт W3C для CSS flexbox.