Поддержка IE8 для запроса css Media


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

@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 178

11 ответов:

версии 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 (которые вы не должны использовать в любом случае по соображениям производительности). Также не будет слушать медиа атрибут <link> и <style> элементы".

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

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

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

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

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

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

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

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

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

Примечание: не работает на @ import'Ed таблицы стилей (которые вы не должны использовать в любом случае по соображениям производительности). Также не будет слушать медиа атрибут <link> и <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. Например, ответить можно добавить, чтобы добавить поддержку медиа-запросов для 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

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

Примечание :

технически это еще одна альтернатива: использование CSS хаки к IE

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

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

Я @media screen {} и он отлично работает для меня в реальном IE8.

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