Поддержка 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 ответов:
версии 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 плагин (имеет дело только с максимальной/минимальной шириной)
взято из 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.