Проблемы отображения сайта на Bootstrap 3 в IE8: решение

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для обеспечения работы IE8 с Bootstrap 3, следует добавить в блок <head> вашего HTML-документа следующие полифилы:

HTML

Скопировать код

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Данные скрипты активируют поддержку элементов HTML5 и медиа-запросов в IE8, что обеспечивает корректную работу Bootstrap 3. Для повышения стабильности рекомендуется иметь локальные копии CSS и скриптов Bootstrap, что исключает возможные проблемы с кроссдоменными запросами при использовании CDN.

Кинга Идем в IT: пошаговый план для смены профессии

Детальное решение

Обеспечение единообразия верстки в IE8

Вставка следующих мета-тегов в <head> помогает обеспечить стабильность верстки:

HTML

Скопировать код

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Первый мета-тег задает последнюю доступную версию рендерингового движка IE, второй адаптирует страницу для мобильных устройств. Контроль ширины на десктопных экранах можно осуществить с помощью свойства max-width для класса .container. Инструменты разработчика в IE помогут решить проблемы с некорректным отображением элементов.

Локальное тестирование и развертывание

Локальное тестирование есть важный этап любого проекта. Убедитесь, что все ресурсы правильно подключены и доступны из соответствующих директорий. Инструменты для проверки совместимости с браузерами, такие как BrowserStack, будут полезны при тестировании.

Визуализация

Настройка IE8 для работы с Bootstrap 3 — это компромисс между возможностями и ограничениями:

Markdown

Скопировать код

Bootstrap 3 🚗💨: Готов к использованию в современных браузерах! [IE9+, Chrome, Firefox, Safari]

IE8 🛠️⏳: Ограничен в основных возможностях! (Медиа-запросы, скругленные углы, тени...)

Markdown

Скопировать код

Необходимые утилиты: 🧰🔧
- Respond.js для медиа-запросов 📐📲
- HTML5shiv для элементов HTML5 🏗️💻
- CSS3 PIE для визуальных стилей 🎨🖌️

Интеграция этих компонентов при помощи полифилов позволяет:

Markdown

Скопировать код

IE8 🚗🔨🖌️➡️💨: Не составляет конкуренции гоночным машинам, но удерживает общий темп!

Завершение

Изучайте особенности совместимости Bootstrap с IE8: в некоторых случаях может быть целесообразно заменить <nav> на <header> или другие подходящие элементы. Размещение respond.js перед закрывающим тегом body может улучшить его работу.

При каждом обновлении Bootstrap веб-стандарты могут меняться. Следование за руководством миграции поможет поддерживать обратную совместимость.

Полезные материалы

Начало работы с Bootstrap — Официальное руководство по Bootstrap 3, его функционалу и особенностям.
CSS3 PIE — Полифил для CSS, добавляет функции CSS3 в более ранние версии IE.
GitHub – scottjehl/Respond — Простой и быстрый полифил для медиа-запросов, разрабатывался для работы с IE6-8.
GitHub – aFarkas/html5shiv — Скрипт, позволяющий использовать HTML5 элементы в устаревших версиях IE.
Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости отображающие поддержку веб-стандартов основными браузерами.
BrowserStack — Удобный сервис для лайв-тестирования браузеров и обеспечения массовой совместимости веб-приложений.