IE9在加载时使用非外部CSS加载错误的媒体查询信息

Question

我有一个页面在<style>标签中使用非外部CSS，在那些<style>标签中是以下媒体查询：

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

所有这些都在Firefox中运行良好，CSS为768px宽度，并且仅在应该的时候呈现。但是，在IE9中，无论大小如何，此媒体查询中的CSS都会在加载时呈现。

然而，在加载之后，如果我根本改变浏览器大小，它会像桌面版本一样重新呈现。所以基本上，IE9非外部样式表似乎是渲染所有CSS，无论是在媒体查询中它是否匹配，但是如果浏览器调整大小，则呈现正确的CSS，甚至是像素。

有谁知道这到底发生了什么，或者是否有快速修复？我能够想到的唯一解决方案是通过重新排序我的CSS并添加新的媒体查询来解决这个问题，我希望避免更新代码。

Answer 1

我在ie10中遇到了与外部css文件类似的问题。我通过给查询至少1px（0px似乎不起作用）来修复它。

它并没有解决我所有的问题，但对你来说可能已经足够了。

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

Answer 2

我遇到了在IE 10中发生的类似问题。为媒体查询设置分钟并没有帮助解决这个特定问题。我使用了一些js来将窗口大小调整到完全相同的大小，并修复了IE所具有的问题。感觉有点脏，但它有效。

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

Answer 3

在使用带有媒体查询的外部css时，我遇到了类似的问题。通过在html代码后加载css解决。