Получить профессию в Skypro
Решение проблем 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.