Поддержка IE8 для CSS Media Query

IE8 не поддерживает следующий медиа-запрос CSS:

@import url("desktop.css") screen and (min-width: 768px);

Если нет, какой альтернативный способ написания? То же самое отлично работает в Firefox.

Есть проблемы с кодом ниже?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Версии Internet Explorer до IE9 не поддерживают медиазапросы .

Если вы ищете способ унизить дизайн для пользователей IE8, вам может пригодиться условное комментирование IE. Используя это, вы можете указать специфическую таблицу стилей IE 8/7/6, которая перезаписывает предыдущие правила.

Например:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Это не позволит адаптивного дизайна в IE8, но может быть более простым и доступным решением, чем использование плагина JS.

Вероятно, вы ищете css3-mediaqueries-js : этот скрипт эмулирует медиазапросы. Однако (с сайта скрипта) он «не работает с @importтаблицами стилей ed (которые вы не должны использовать в любом случае по соображениям производительности). Также не будет прослушивать атрибут media элементов <link>and <style>».

В том же духе у вас есть более простой Respond.js , который включает только min-widthи max-widthмедиа-запросы.

Лучшее решение, которое я нашел, - это Respond.js, особенно если ваша главная задача - убедиться, что ваш отзывчивый дизайн работает в IE8. При минимальной / gzipped она довольно легкая - 1 КБ, и вы можете убедиться, что ее загружают только клиенты IE8:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Это также рекомендуемый метод, если вы используете загрузчик: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (и более ранние версии) и Firefox до 3.5 не поддерживают медиазапрос. Safari 3.2 частично поддерживает это.

Есть некоторые обходные пути, которые используют JavaScript для добавления поддержки медиа-запросов в эти браузеры. Попробуйте эти:

Media Queries jQuery плагин (работает только с максимальной / минимальной шириной)

css3-mediaqueries-js - библиотека, предназначенная для добавления поддержки медиазапросов в не поддерживающие браузеры

Взято со страницы проекта css3mediaqueries.js.

Примечание: не работает с таблицами стилей @ import (которые не следует использовать в любом случае по соображениям производительности). Также не будет прослушивать атрибут media элементов <link>and <style>.

Простой способ использовать css3-mediaqueries-js - добавить следующий тег перед закрывающим тегом body:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

Отредактированный ответ: IE понимает только экран и печать как импортируемые медиа. Все остальные CSS, поставляемые вместе с оператором import, заставляют IE8 игнорировать оператор import. У браузера Geco, такого как Safari или Mozilla, такой проблемы не было.

Медиа-запросы вообще не поддерживаются в IE8 и ниже.

Обходной путь на основе Javascript

Чтобы добавить поддержку IE8, вы можете использовать одно из нескольких решений JS. Например, Respond можно добавить, чтобы добавить поддержку медиазапроса для IE8 только со следующим кодом:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries - это еще одна библиотека, которая делает то же самое. Код для добавления этой библиотеки в ваш HTML будет идентичным:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Альтернатива

Если вам не нравится решение на основе JS, вам также следует рассмотреть возможность добавления таблицы стилей только для IE <9, где вы настраиваете свой стиль, специфичный для IE <9. Для этого вы должны добавить следующий HTML в ваш код:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Примечание :

Технически это еще одна альтернатива: использование CSS-хаков для таргетинга IE <9. Он имеет то же влияние, что и таблица стилей IE <9, но для этого вам не нужна отдельная таблица стилей. Однако я не рекомендую эту опцию, так как они генерируют недопустимый код CSS (что является лишь одной из нескольких причин, почему использование CSS-хаков обычно не одобряется сегодня).

До Internet Explorer 8 не было поддержки медиа-запросов. Но в зависимости от вашего случая вы можете попытаться использовать условные комментарии для таргетинга только на Internet Explorer 8 и ниже. Вам просто нужно использовать правильную архитектуру файлов CSS.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Я использовал, @media \0screen {}и он отлично работает для меня в реальном IE8.

IE не добавил поддержку медиа-запросов до IE9. Так что с IE8 вам не повезло.