Bootstrap 3 создан для работы в последних версиях десктопных и мобильных браузерах, это означает что старые браузеры будут ограничены по стилю в некоторых моментах, а также по функционалу или модулям.
Поддерживаемые браузеры
Bootstrap 3 поддерживает следующие браузеры в последней версии:
- Chrome (Mac, Windows, iOS, и Android)
- Safari (Mac и iOS only, так как версия под Windows больше не обновляется)
- Firefox (Mac, Windows)
- Internet Explorer
- Opera (Mac, Windows)
Неофициально, Bootstrap должен работать в Chromium для Linux и в Internet Explorer 7 версии, но тем не менее официальной поддержки этих браузеров - НЕТ
Internet Explorer 8 и 9
Internet Explorer 8 и 9 так же поддерживаются, но тем не менее, множество CSS3-правил, HTML5-элементов не работает корректно. Дополнительно, что бы исправить эту проблему - Internet Explorer 8 нуждается в использовании Respond.js для поддержки медиа-запросов.
| Функционал |
Internet Explorer 8 |
Internet Explorer 9 |
border-radius |
Не поддерживается |
Поддерживается |
box-shadow |
Не поддерживается |
Поддерживается |
transform |
Не поддерживается |
Поддерживается, с префиксом -ms |
transition |
Не поддерживается |
placeholder |
Не поддерживается |
Посетите проект Can I use... для детельного описания поддержки CSS3 и HTML5 различными браузерами.
Internet Explorer 8 и Respond.js
Остерегайтесь следующих моментов при использовании Respond.js для Internet Explorer 8 при разработке и особенно при выводе проекта на продакшн.
Respond.js и cross-domain CSS
Использование Respond.js с CSS-файлами расположенными на других доменных именах и/или на субдоменах (например на CDN) требует дополнительных настроек. Подробнее в документации по Respond.js.
Respond.js и file://
В соотвествии с правилами безопастности браузеров, Respond.js не работает на страницах просматреваемых через file:// протокол (например при просмотре HTML-файла на локальной машине). Для теста IE8, просматривате сраницы только через HTTP(S) протокол. Подробнее в документации по Respond.js.
Respond.js и @import
Respond.js не работает с CSS, который ссылается через @import. Известно что Drupal (в частных конфигурациях) использует @import. Подробнее в документации по Respond.js.
Internet Explorer 8 и box-sizing
IE8 не полноценно поддерживает box-sizing: border-box; особенно в сочетании с правилами min-width, max-width, min-height, или max-height. На этот случай, начиная с версии v3.0.1, мы не указываем max-width для классов .container.
IE - Режим совместимости
Bootstrap 3 не поддерживает старый режим совместимости в Internet Explorer. Для IE используйте <meta> тег:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Данный тег включен во все примеры Bootstrap 3 выше.
Посмотрите обсуждение этого вопроса на StackOverflow для получения большей информации.
Internet Explorer 10 в Windows 8 и Windows Phone 8
Internet Explorer 10 не делает различия устройств по ширине от ширины viewport'а, и таким образом не правильно применяет media queries в CSS. Для исправления этой проблемы используйте следующий CSS и JavaScript пока Microsoft не полечит эту проблему самостоятельно (что произойдет очень не скоро, если вообще произойдет):
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style")
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
)
document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}
Для большей информации почитайте статью Windows Phone 8 и Device-Width (Англ.).
Внимание! Мы включили эту информацию в документацию по Bootstrap 3 только как пример.
Safari - округление значений
В последней версии Safari для Mac, имеется проблема с рендерингом не целых значений с запятой в классах .col-*-1, это означает что при использовании 12 колонок Вы обнаружите, что они несколько короче (уже) по ширине. Посмотрите обсуждение вопроса #9282 на GitHub. У Вас есть несколько опции для исправления ситуации:
- Добавьте класс
.pull-right к последней колонке
- Перепишите правила ширины колонок для Safari (более тяжелый вариант)
Как только мы найдем легкий способ полечить проблему вы увидите ее решение - следите за вопросом #9282 на GitHub.
Модальные окна и мобильные устройства
Overflow и scrolling (скроллинг)
Поддержка для overflow: hidden в элементе <body> ограниченна для iOS и Android. Это вызовет скроллинг в элементе <body> (т.е. прокручиваться будет весь сайт) при прокрутке Модального окна.
Виртуальная клавиатура
Также, при использовании елементов ввода (input, textarea и т.п.) в модальном окне – у iOS есть особенность что, не обновляется фискированная позиция элементов когда вызвана виртуальная клавиатура. Здесь есть несколько обходных путей, включающие приминение правила position: absolute или устновка таймера фокуса, который пытаться корректировать положение вручную. Оба решения не поддерживаются Bootstrap 3, поэтому Вы свободны в выборе решения, которое является лучшим для Вашего приложения.
Масштабирование в браузере (zoom)
При масштабировании страницы неизбежно возникновение артефактов рендеринга в некоторых компонентах, как в Bootstrap 3, так и в любом другом случае. В зависимости от задачи, у нас есть возможность исправлять частные проблемы (во-первых используйте Google или Yandex, в случае отсутсвия решения в сети вы можете завести ветку обсуждения на GitHub). Тем не менее, мы склонны игнорировать их, поскольку они зачастую не имеют прямого решения, кроме часто повторяющихся обходных путей.
