IE9 загружает неверную информацию о запросах мультимедиа при загрузке с помощью нестандартного CSS

У меня есть страница, в которой используются теги <style>, которые используют не внешний CSS, а тегами <style> являются следующие медиа-запросы:

Все отлично работает в Firefox, CSS для ширины 768 пикселей и ниже, только если это необходимо. Однако в IE9 CSS внутри этого медиа-запроса отображается при загрузке независимо от размера.

После того, как он загрузится, если я вообще изменил размер браузера, он будет повторно использоваться как настольная версия, как и должно быть. Таким образом, нестандартная таблица IE9, похоже, отображает все CSS, независимо от того, находится ли она в медиа-запросе, для которого она не соответствует или нет, но затем для правильного CSS, если размер браузера изменяется даже пикселем.

Кто-нибудь знает, что именно происходит с этим, или если есть быстрое решение? Единственные решения, о которых я мог подумать, будут работать над проблемой, переупорядочивая мой CSS и добавляя новый медиа-запрос, который я бы хотел избежать, чтобы упростить обновление кода.

Ответы

Ответ 1

У меня была аналогичная проблема с внешним файлом css в ie10. Я как бы исправил это, предоставив запросу минимум 1px (0px, похоже, не работает).

Он не решает всех моих проблем, но этого может быть достаточно для вас.

@media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}

Ответ 2

Я столкнулся с аналогичной проблемой, которая происходила в IE 10. Установка min для медиа-запроса не помогла устранить эту проблему. Я использовал бит js для изменения размера окна до того же размера, и он исправил проблему, которую имел IE. Он чувствует себя немного грязным, но он работает.

$(document).ready(function() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  window.resizeTo(w, h);
});