HTML5 Boilerplate + Media Queries не работает в IE8?

Question

Так как Boilerplate имеет встроенный response.js, теоретически он должен поддерживать следующие CSS:

@media only screen and (max-height: 580px){.rnd-class{:height:200px !important;}}

В FF и Chrome он работает должным образом, и пользовательские стили запускаются после изменения размераокно браузера.

Однако в IE8 пользовательские стили всегда включены - независимо от размера текущего окна браузера.

Я думал, что проблема где-то внутри моего кода, ночем я посетил мобильный шаблон Boilerplate , и я заметил, что он также меняет свой макет в обозревателе и изменяет размеры и использует те же медиазапросы из стандартного Boilerplate.* Мобильный Boilerplate работает только с FF и Chrome.Посещая его с IE8, медиа-запросы не запускаются, и мне дают версию для самого маленького устройства.

Теперь мой вопрос: вы, ребята, испытываете то же самое в IE8?Как этот сайт ищет вас в IE8 и меняет ли его стили в зависимости от текущего размера окна браузера?

Или это, вероятно, связано с моей конкретной версией IE?(Я не могу проверить это на другой версии IE прямо сейчас).

И, может быть, просто возможно, some1 знает решение этой проблемы?

PS В настоящее время я использую "Modernizr" по умолчанию (сСценарий response.js встроенный), поставляемый с HTML5 Boilerplate.

Answer 1

В качестве начального упоминания вы упомянули, что у вас нет доступа к другим версиям IE, вы видели IETester ? Используя этот инструмент, я вижу то же поведение, что и у вас, где IE8 не меняет стили в ответ на изменения размера окна. IE9 correclty показывает изменение размера основного заголовка при уменьшении размера окна.

Answer 2

Я нашел исправление без использования javascript.

У меня та же проблема, но только когда мои медиа-запросы сохраняются в отдельном файле .css.Это означает, что если я сохраню их в HTML, они работают в IE8.Очень странно, но это работает по какой-то причине.Это не идеально, но, по крайней мере, я обхожу это, так что если у кого-то есть идеи, почему это происходит или что я могу сделать, чтобы сохранить мои CSS в отдельном файле, пожалуйста, дайте мне знать!

Answer 3

Я написал патч, который разрешает медиазапросы минимальной и максимальной высоты с response.js

Надеюсь, он скоро будет интегрирован: https://github.com/scottjehl/Respond/pull/96

Answer 4

Respond.js работает только с медиа-запросами, ориентированными на ширину;таким образом, он не будет работать с максимальной высотой.В настоящее время я также ищу решение.

РЕДАКТИРОВАТЬ: Я нашел решение.

http://code.google.com/p/css3-mediaqueries-js/

Условно загрузить это для сценария IE8 и ниже.Вы должны быть все готово!

Answer 5

Согласно http://caniuse.com/css-mediaqueries медиазапросы не поддерживаются в IE8.Но вы можете создать собственный Modernizr, включив MQ polyfil (response.js), чтобы включить MQ в этом (и более старых) браузерах.