Поддерживает ли 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 - это, вероятно, то, что вы ищете: этот script эмулирует медиа-запросы. Однако (с сайта script) он "не работает на таблицах стилей @import ed (которые вы не должны использовать в любом случае по причинам производительности). Также не будет прослушиваться атрибут media <link> и <style> элементов".
В том же ключе у вас есть более простой Respond.js, который разрешает только запросы min-width и max-width.
Лучшее решение, которое я нашел, это 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
IE8 (и более низкие версии) и Firefox до 3.5 не поддерживают мультимедийный запрос. Safari 3.2 частично поддерживает его.
Есть некоторые способы обхода, которые используют JavaScript для добавления поддержки медиа-запросов в эти браузеры. Попробуйте следующее:
Медиа-запрос Плагин jQuery (используется только с максимальной/минимальной шириной)
Взято на странице проекта css3mediaqueries.js.
Примечание. Не работает в таблицах стилей @import'ed (которые вы не должны использовать в любом случае по причинам производительности). Также не будет прослушиваться атрибут media элементов <link> и <style>.
Простым способом использования 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]-->
Отредактированный ответ: IE понимает только экран и печатает как импортный носитель. Все остальные CSS, поставляемые вместе с импортом, заставляют IE8 игнорировать оператор импорта. У браузера Geco, такого как сафари или мозилла, не было этой проблемы.
Запросы на средства массовой информации вообще не поддерживаются в IE8 и ниже.
Чтобы добавить поддержку 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 обычно не одобряется сегодня).
До Internet Explorer 8 поддержка запросов Media не поддерживалась. Но в зависимости от вашего случая вы можете попытаться использовать условные комментарии для нацеливания только на Internet Explorer 8 и ниже. Вам просто нужно использовать правильную архитектуру файлов CSS.
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php
Я использовал @media \0screen {}, и он отлично работает для меня в REAL IE8.
IE не добавлял поддержку медиа-запросов до IE9. Так что с IE8 вам не повезло.