Twitter Bootstrap отзывчивый макет не работает в IE8 или ниже

Я разработал сайт с помощью Twitter bootstrap и кажется, что отзывчивый макет часть сломана во всех браузерах IE от IE8 и ниже. Это просто не поддерживается для этих браузеров?

6 56
css css3 twitter-bootstrap internet-explorer-8 media-queries

6 ответов:

для обслуживания @media запросы в IE 8 и ниже, проверить
css3-mediaqueries-js.

css3-mediaqueries.js by Ваутер ван дер Грааф это библиотека JavaScript, чтобы сделать IE 5+, Firefox 1+ и Safari 2 прозрачно анализировать, тестировать и применять CSS3 медиа-запросы. Firefox 3.5+, Opera 7+, Safari 3+ и Chrome уже предлагают встроенную поддержку.

PS: я использую Twitter Bootstrap С этим плагином и он работает потрясающе! Надеюсь, это поможет! :)

33

Если вы хотите иметь лучшую производительность и ваша структура не слишком сложна.

вы можете попробовать ответить.JS

от автора:

Это не единственный CSS3 Media Query polyfill скрипт там; но это черт возьми, может быть самым быстрым.

Если вы ищете более надежную поддержку запросов CSS3 Media, вы можете проверьте http://code.google.com/p/css3-mediaqueries-js/. в тестировании, Я обнаружил, что скрипт заметно медленный при рендеринге сложных отзывчивый дизайн (как по размеру файла, так и по производительности), но это действительно поддерживает гораздо больше функций запроса мультимедиа, чем этот скрипт. Большая шляпа совет авторам! :)

53

вот шаги, которые я предпринял, чтобы получить эту работу:

взгляните на ответ.демонстрационная страница js в IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html

это работает так получить, что работает локально, загрузив ответ.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.

2

Я пробовал все способы, описанные выше, и он работает, но так медленно. Я предлагаю следующий подход. Мы должны разложить css файл, который содержит @media и вставить каждое правило в отдельный файл. Затем мы должны условно загрузить каждый файл, в зависимости от ширины экрана браузера. Все эти действия будет делать скрипт cload.js. Скачать cload.js и прочитать, как его использовать вы можете здесь

0

вы все должны прочитать этот пост на форуме.

Это очень ясно объясняет проблемы между IE и Twitter Bootstrap. Это также дает вам решения, которые на самом деле работают.

цитата:

проблема здесь в том, что на официальных страницах вроде http://twitter.github.com/bootstrap/ он утверждает, что работает во всех браузеры, даже IE7. Что, теоретически, может быть, но вы должны дизайн и развитие вокруг определенного настроения при разработке в ответ.

0

Я использовал html5shiv по адресу:

https://code.google.com/p/html5shiv/

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

-1