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

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

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

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

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

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

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

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

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

А может быть, только может быть, кто-то знает решение этой проблемы?

P.S. В настоящее время я использую сценарий «Modernizr» по умолчанию (со встроенной функцией response.js), который поставляется с HTML5 Boilerplate.


person r0skar    schedule 23.11.2011    source источник
comment
Обратите внимание, что мы удалили поддержку response.js из H5BP 3.0.   -  person Divya Manian    schedule 13.02.2012


Ответы (5)


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

person Darren Lewis    schedule 23.11.2011
comment
Спасибо за ссылку! Это программное обеспечение выглядит потрясающе :) Поскольку вы не видите никаких изменений стиля и в IE8, мы можем предположить, что это ошибка, не связанная с моим кодом, я прав? - person r0skar; 23.11.2011
comment
Я знаю, что это немного старый пост, но по моему опыту вы не можете доверять IETester, особенно при тестировании функций, использующих JavaScript. Лучший вариант, который я нашел, установить правильную версию IE на виртуальную машину для случаев, когда вам нужна правильная версия. - person LocalPCGuy; 12.12.2012

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

person srigi    schedule 23.11.2011
comment
В своем вопросе я написал, что использую HTML5 Boilerplate, в который встроен response.js, но он все равно не работает... Каков ваш опыт работы с IE на их мобильный сайт ? Работают ли запросы при изменении размера окна IE? - person r0skar; 23.11.2011


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

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

person eikes    schedule 23.01.2012

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

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

person mickolosmaximus    schedule 12.01.2013