Запрос СМИ не работает в IE9

У меня возникла странная проблема, которая возникает только с IE9. Я работаю над веб-страницей с макетом рабочего стола и мобильным макетом. Тот же HTML, другой CSS. Проблема возникает с кодом ниже:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)

Все браузеры, за исключением IE9, при необходимости показывают рабочий стол. Мобильные браузеры правильно отображают расположение мобильных устройств. Проблема с IE9 заключается в том, что она также показывает мобильный макет.

Теперь, если я удаляю слова "только" и "экран" из приведенного выше кода, IE9 затем правильно отображает сайт рабочего стола. Проблема в том, что мобильные браузеры также отображают рабочий стол. Я провел некоторое исследование по этому вопросу и ничего не видел по этому вопросу.

Спасибо за чтение,

Джон

Ответ 1

На всякий случай, если кто-то сканирует SO для ответа на этот вопрос, два вышеупомянутых ответа не решают основную проблему, на которую здесь ответят - CSS-запрос, не работающий в IE 9

В основном встроенные медиа-запросы CSS3 работают в IE9, но вы должны отключить режим Compatibilty -

<meta http-equiv="X-UA-Compatible" content="IE=9">

Вышеупомянутый метатег должен быть помещен перед любыми другими мета-тегами, иначе IE9 будет по умолчанию включен режим совместимости и впоследствии не будет работать.

Ответ 2

Из того, что я могу сказать, это сводится к тому, что IE9 не интерпретирует "min-device-width" и "max-device-width".

В соответствии с http://msdn.microsoft.com/library/ms530813.aspx он не поддерживает эти свойства, только "min-width" и "max-width".

Кроме того, http://www.w3.org/TR/css3-mediaqueries/#error-handling заявляет, что браузер должен игнорировать свойства, которые он не распознает. Не так с IE9 кажется.

Ответ 3

Да, используйте @media (max-width: 860px) вместо max-device-width.

IE 9 просто дал мне сердечный приступ. Запросы средств массовой информации проекта не работали.

Затем, после нескольких минут поиска в Google, вы должны включить CSS в HTML. Только встроенные стили!

Что такое перетаскивание этих браузеров IE!

Ответ 4

Я обычно добавляю это в свои проекты, и он работает для меня до сих пор:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Ответ 5

Режим совместимости IE решает проблему. Перейдите в Параметры просмотра совместимости и отключите параметр Отобразить сайты интрасети в представлении совместимости.