Поддержка IE8 для медиа-запроса CSS

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);
178
css html internet-explorer-8 media-queries responsive-design

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.

77

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

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

341

лучшее решение, которое я нашел, это ответить.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

50

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

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

Media Queries jQuery plugin (имеет дело только с шириной max/min)

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

14

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

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

11

простой способ использовать 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]-->
8

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

6

медиа-запросы Не поддерживается в 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 хаки!--6--> к IE

6

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

5

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

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

4

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

3