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

我有一个页面，在

标记中使用了非外部CSS，在这些

标记中有以下媒体查询：

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

在Firefox中一切正常，768px宽度及以下的CSS只在应该的时候渲染。但是，在IE9中，无论大小如何，此媒体查询中的CSS都会在加载时呈现

然而，在加载之后，如果我改变了浏览器的大小，它会重新显示为桌面版本，这是应该的。因此，基本上，IE9非外部样式表似乎正在呈现所有CSS，无论它是否在媒体查询中，但如果浏览器大小调整，即使是像素大小，也会呈现正确的CSS

---

有没有人知道这到底是怎么回事，或者有没有快速解决办法？我能想到的唯一解决方案是通过重新排列CSS并添加新的媒体查询来解决这个问题，为了便于更新代码，我希望避免使用新的媒体查询。

我在ie10中遇到了与外部CSS文件类似的问题。 我通过给查询一个最小1px（0px似乎不起作用）解决了这个问题

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

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

---

我在IE 10中遇到了一个类似的问题。设置媒体查询的最小值无助于解决此特定问题。我使用了一点js将窗口调整到完全相同的大小，它修复了IE的问题。它感觉有点脏，但能起作用

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

---

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

您只能使用此修复程序将IE9作为目标：

/* IE9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    body {
        background: blue;
    }
}

---

该代码应该可以正常工作，因此可能存在其他干扰。你能给我们发一个链接让我们看看吗，或者发一些测试代码来演示这个问题吗？@ralph.m我目前正在寻找一种方法来在线发布活动代码来模仿这个问题。媒体查询似乎可以在JSFIDLE中使用IE9，但我不知道JSFIDLE是否以相同的方式编译代码。对于非外部样式表中的媒体查询，似乎严格遵循IE9。只要我稍微调整大小，浏览器就会正确地呈现它们，但首先它会呈现

标记中的所有CSS，无论它们是否在应该避免的媒体查询中。我无法链接到项目本身，因为它位于私有服务器上。我在发布之前做了一个测试，您提供的代码在IE9上运行良好。应该提到这一点，我想这就是发布代码或链接到您的站点的方便之处，我指的代码显示在iframe中。看起来其他人也有类似的问题。请接受Jonathan Joosten的回答，这正是适合我的解决方案。我很惊讶这仍然是IE11中的一个问题。出于某种原因，IE在加载时运行了错误的媒体查询，只是一瞬间，它会导致我的带有转换的链接快速闪烁错误的颜色。这解决了它，但我真的不明白为什么需要它！谢谢你！这对我也有用。因为它可以工作，我唯一的猜测是IE加载源文件或内联块脚本，然后再也不回去检查尺寸或认为不必检查（或视口尺寸为0），所以它应用CSS中的任何内容；但最小宽度附加过滤器只是应用正确的味觉。自动接线，有人吗？：）非常感谢你！我在一个运行IE11的网站上也有同样的问题。添加最小宽度：1px条件可正确呈现网站（或确保媒体查询被正确识别），而无需首先调整浏览器窗口的大小。这在我的情况下部分有效-如果窗口大于768px，则问题已得到修复，因为它不会加载任何媒体查询。但是，如果窗口是500px，我们需要在这种情况下加载媒体查询，即使修复到位，也不需要加载。谢谢。这种方法也解决了相反的问题。如果您有一个类似于

@media screen and（最小宽度：641px）

的查询，请将其更改为

@media screen and（最小宽度：641px）和（最大宽度：10000px）

，它将解决此问题