Медиа-запросы перестали работать в IE8

Мы по-прежнему получаем много трафика от IE8, но мы полны решимости пойти по адаптивному маршруту. В прошлом мы получали медиа-запросы для работы в ie8, но не смогли добиться успеха с нашим новейшим шаблоном.

Наша настройка CSS / области просмотра в теге заголовка html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" media="screen" href="/request/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="/request/css/bootstrap-responsive.css">
<link rel="stylesheet" media="screen" href="/request/css/styles.css">

<script src="http://www.oursite.com/js/modernizr.custom.2.6.2.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
      <script src="http://www.oursite.com/js/respond.min.js"></script>
<![endif]-->

Наш синтаксис медиа-запросов (с использованием начальной загрузки):

@media (max-width: 767px) { }

Клянусь, это работало раньше, но теперь нет. Мы пробовали различные другие полифилы с настройками modernizr, пробовали html5 shiv вместо modernizr, пробовали настраивать параметры мета-области просмотра и пробовали другой синтаксис медиа-запросов (@media screen ...). Я трижды проверил html, и он подтвердил. Мы используем row-fluid из бутстрапа, но он должен быть настроен правильно. У меня заканчиваются идеи. Помощь?


css twitter-bootstrap media-queries internet-explorer-8
person monnie    schedule 02.11.2012    source источник
comment
Привет, @Marc, просто любопытно - почему CSS3 был удален из заголовка этого вопроса? Являются ли медиа-запросы CSS3? или я ошибаюсь?   -  person monnie    schedule 02.11.2012
comment
Мы стараемся избегать тегов в заголовках. Я знаю, что Media Queries - это тоже тег, но без него название не имело бы смысла. Я думал, что в названии нет необходимости в CSS3. Извините за путаницу   -  person Marc    schedule 02.11.2012
comment
Ах хорошо. Спасибо за объяснение!   -  person monnie    schedule 02.11.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал bootstrap на сайте прессы, но он не работал в IE8, я использовал javascript css3-mediaqueries.js, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

вот пример:

<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>
person Mohsen    schedule 31.08.2013