Twitter Bootstrap Отзывчивый макет не работает в 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/

Это сработало для меня. Он также доступен с помощью беседки.