Поддержка IE8 для CSS Media Query - PullRequest
Новая
       18

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

178 голосов
/ 24 апреля 2011

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);

Ответы [ 11 ]

341 голосов
/ 24 апреля 2011

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

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

77 голосов
/ 24 апреля 2011

версии 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.

50 голосов
/ 10 января 2014

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

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

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

14 голосов
/ 24 апреля 2011

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

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

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

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

11 голосов
/ 08 февраля 2012

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

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

8 голосов
/ 19 февраля 2014

Простой способ использования 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]-->
6 голосов
/ 10 июля 2015

Медиа-запросы вообще не поддерживаются в 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-код в ваш код: </p> 

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

Примечание:

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

6 голосов
/ 24 апреля 2011

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

5 голосов
/ 07 мая 2013

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

4 голосов
/ 18 августа 2014

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

Я использовал @media \0screen {}, и он отлично работает в РЕАЛЬНОМ IE8.

Страница:
...