Я разработал сайт, используя twitter bootstrap, и кажется, что отзывчивая часть макета разбита во всех браузерах IE из IE8 и ниже. Это просто не поддерживается для этих браузеров?
Ответ 1
Для поддержки запросов @media в IE 8 и ниже, проверьте
CSS3-mediaqueries-JS.
css3-mediaqueries.js от Wouter van der Graaf - это библиотека JavaScript, позволяющая прозрачно анализировать, тестировать и применять CSS3 Media Queries для IE 5+, Firefox 1+ и Safari 2. Firefox 3.5+, Opera 7+, Safari 3+ и Chrome уже имеют встроенную поддержку.
PS: Я использую Twitter Bootstrap с этим плагином, и он работает потрясающе! Надеюсь это поможет!:)
Ответ 2
Если вы хотите иметь лучшую производительность, а ваша структура не слишком сложна.
Вы можете попробовать Respond.JS
От автора:
Это не единственный CSS3 Media Query polyfill script; но это чертовски хорошо может быть самым быстрым.
Если вы ищете более надежную поддержку CSS3 Media Query, вы можете проверьте http://code.google.com/p/css3-mediaqueries-js/. При тестировании, Я обнаружил, что script будет заметно медленным при рендеринге (как в файлах, так и в производительности), но это действительно поддерживает гораздо больше функций медиа-запросов, чем этот script. Большая шляпа совет авторам!:)
Ответ 3
Это шаги, которые я предпринял, чтобы заставить это работать:
Взгляните на демонстрационную страницу response.js в IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html
Это работает так, что работайте локально, загрузив response.js в ваш поставщик/активы или где-нибудь подобное.
Отключите локальный бутстрап и попробуйте сделать это в своем css:
/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
body {
background: blue;
}
}
Это работает!
Поскольку я использовал cdn, мне нужно было загрузить и разместить его локально:
http://getbootstrap.com/getting-started/#download
Итак, он работает с ними:
= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'
Вам также нужно избавиться от любых объявлений @import.
Ответ 4
Я пробовал все описанные выше способы, и он работает, но так медленно. Я предлагаю следующий подход. Мы должны разложить файл css, содержащий @media, и вставить каждое правило в отдельный файл. Затем мы должны условно загружать каждый файл в зависимости от ширины экрана браузера. Все эти действия сделают script cload.js. Загрузите cload.js и прочитайте, как его использовать, здесь
Ответ 5
Вы все должны прочитать это сообщение форума.
Это очень четко объясняет проблемы между IE и Twitter Bootstrap. Он также дает вам решения, которые действительно работают.
Цитата:
Проблема здесь в том, что на официальных страницах http://twitter.github.com/bootstrap/ он утверждает, что работает во всех браузеров, даже IE7. Который, теоретически это может быть, но вы должны дизайн и развитие вокруг определенного настроя при разработке ответно.
Ответ 6
Я использовал html5shiv в:
https://code.google.com/p/html5shiv/
Это сработало для меня. Он также доступен с помощью беседки.