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


178

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

для тех, кто хочет попробовать встроенный css со средствами массовой информации и использовать ответ (.min) .js response не работает в этой ситуации - кажется, он работает для файлов .css
NoWomenNoCry

Ответы:


77

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


94
Я не вижу, как условные таблицы стилей решат проблему адаптивного дизайна.
Джеймс Вестгейт

8
Я не понимаю, как это решение решит адаптивный дизайн в IE? Загрузка разных таблиц стилей в зависимости от браузера не имеет ничего общего с использованием различных свойств стиля, например, в зависимости от размера браузера.
Klikerko

13
Я думаю, что правильный ответ заключается в том, что IE8 не поддерживает медиа-запросы . Этот ответ как бы говорит об этом, но на первый взгляд он не совсем понятен. Несмотря на это, я думал, что у него есть поддержка, и этот ответ помог мне понять иначе.
Джейсон

54
Это правда, что этот ответ не является адаптивным решением, НО, и для меня это огромное «НО», дело в том, что IE8 не используется на iPad или планшетах Android. IE8 может использоваться на компьютерах с XP / Vista в основном с 2003 по 2009 год, экраны в основном имеют ширину около 1024 пикселей. Windows Mobile работает под IE6, а Windows Pone под IE9 +. Настоящий вопрос здесь состоит в том, чтобы спросить себя, действительно ли создание адаптивных для IE8 действительно полезно?
Грегуар Д.

16
@GregoireD. Да, это так. Потому что есть люди, которые просматривают веб-страницы с увеличением. В моей компании мы форматируем страницы с 4-кратным увеличением 800x600, для большей доступности. Это делает экран шириной около 400 пикселей. Медиа-запросы действительно полезны для этого, несмотря на выбранный вами браузер (и IE8 включен).
Аркана

341

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

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


7
Почему это не помечено как ответ? Идеально для меня, спасибо. Кстати, вы не должны использовать импорт CSS запросов из-за накладных расходов.
RichW

идеально, именно то, что я искал!
Somdow

Спасибо!! Этот ответ и response.js сэкономил мне массу времени, пытаясь обойти обход медиазапросов в ie8.
Ingusmat

3
неважно -> .js должны быть включены после файлов .css ... xD
kaljak

4
Respond работал, но css3-mediaqueries нет. Я полагаю, это потому, что Respond самодостаточен, но css3-mediaqueries использует некоторые функции jQuery, такие как обнаружение пользовательских агентов, и эта функция устарела и удалена (см. Документацию jQuery).
Антон Борицкий

50

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

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

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


14

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

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

Media Queries jQuery плагин (работает только с максимальной / минимальной шириной)

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


Хорошо ... Я только что включил css3-mediaqueries.js в свою страницу .. Пока он не работает в IE..ie медиа-запрос "@import url (" desktop.css ") не только screen и (device-width: 768px);» а также "@import url (" desktop.css ") not screen and (device-width: 768px);"
testndtv

Не уверен, что мне нужно сделать что-то еще .. кроме включения скрипта ..
testndtv

Обратите внимание, что это не работает на импортированных CSS. попробуйте это: <link rel = "stylesheet" type = "text / css" media = "not screen и (device-width: 768px)" href = "desktop.css" />
Фараз Келини

о хорошо .. я вижу. На самом деле в этом случае это может не помочь мне, так как я ищу что-то, ничего не делая на странице .. то есть только внешне в CSS ..
testndtv

Этот скрипт googletrunk css3 js указывает, что он работает только с медиазапросом, используемым внутри таблицы стилей CSS, а не внешне, например, «только экран и ....». Это означает, что вы должны объединить свои таблицы стилей в одну, и внутри них делать то, что вы хотели делать извне: @media screen и (max-width: 980px) {
Capagris

11

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

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


+1 за сообщение, что это не работает с таблицами стилей @ import! Сэкономь мне много времени на моей дочерней WP-теме.
Виниций Гарсия

8

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

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


Мой IE не находится в режиме совместимости. Также есть какой-либо другой альтернативный вариант для IE. В основном я хочу выбрать все, кроме экранного устройства
768px

Также, как обсуждалось в приведенной вами ссылке, я попытался установить тип документа как <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> ... все еще не работает ..
testndtv

1
Я не уверен, что понял тебя правильно. Вы можете использовать JavaScript для определения разрешения экрана? С CSS другого пути нет. Вы уверены, что у вас нет связанных с этим ошибок, которые приводят к тому, что мин может быть переопределен или проигнорирован. Полезный совет - это панель инструментов разработчика. При том , что вы можете проверить жить без pagereloads
SRA

Очень быстро переключается в режим причуда, вы это проверяли? Это также может привести к нежелательному результату. Quirkmode перезапишет ваш тип документа. Также очень практично проверять, что вы хотите в супер крошечном проекте, чтобы подчеркнуть, что это не связанная ошибка / результат
sra

хорошо .. вот как я сейчас обновляюсь ... у меня есть common.css и внутри него я говорю; ... @import url ("desktop.css") screen; @import url ("ipad.css") только экран и (ширина устройства: 768 пикселей); Не уверен, что этот подход правильный, но работает как для настольных компьютеров (IE / FF), так и для iPad. Может ли быть какая-то проблема с этим подходом?
testndtv

6

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

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

Примечание :

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


5

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


4

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

Я использовал, @media \0screen {}и он отлично работает для меня в реальном IE8.


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

@Luca Кроме того, он не позволяет указывать минимальную ширину, максимальную ширину и т. Д.
Джон Слегерс

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.