Поддержка 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);

Ответы

Ответ 1

версии 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-плагина.

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

IE8 (и более низкие версии) и Firefox до 3.5 не поддерживают мультимедийный запрос. Safari 3.2 частично поддерживает его.

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

Медиа-запрос Плагин jQuery (используется только с максимальной/минимальной шириной)

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

Ответ 5

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

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

Ответ 6

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

<!-- 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]-->

Ответ 7

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

Ответ 8

Запросы на средства массовой информации вообще не поддерживаются в IE8 и ниже.

Обходное решение на основе Javascript

Чтобы добавить поддержку IE8, вы можете использовать одно из нескольких решений JS. Например, Ответить можно добавить, чтобы добавить поддержку медиа-запросов для 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. Для этого вы должны добавить в свой код следующий код:

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

Примечание:

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

Ответ 9

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

Ответ 11

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