IE9负荷错媒体查询信息与非外部CSS

问题描述：

我有一个使用在<style>标签非外部CSS，并在这些<style>标签是以下媒体查询的页面：IE9负荷错媒体查询信息与非外部CSS

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

所有在Firefox中工作正常，宽度为768px的CSS，只在应该渲染时显示。但是，在IE9中，无论大小如何，此媒体查询中的CSS都会在加载时呈现。

后，它不过加载，如果我更改了浏览器的大小的话，那重新渲染的桌面版本，因为它应该。所以基本上，IE9非外部样式表似乎在渲染所有的CSS，无论它是否在与它不匹配的媒体查询中，而是在浏览器被调整大小（即使是像素）时渲染正确的CSS。

有谁知道究竟是怎么回事这个问题，或者如果有一个快速的解决？我能够想到的唯一解决方案就是通过重新排序我的CSS，并添加一个新的媒体查询来解决这个问题，我希望避免更新代码。

该代码应该正常工作，所以可能会有其他干扰。你能发布一个链接让我们看看，或发布一些测试代码来证明这个问题吗？ – 2013-05-06 13:32:11

@ ralph.m我目前正在寻找一种方式来在线模仿该问题发布活动代码。媒体查询似乎可以在jsfiddle中使用IE9正常工作，但我不知道jsfiddle以相同的方式编译代码。在非外部样式表中，它似乎完全是IE9与媒体查询。只要稍微调整它的大小，浏览器就会正确呈现它们，但它本身就会呈现'

我发布之前做了一个测试，你提供的代码在IE9上工作得很好。 – 2013-05-06 14:03:28

答

我也有类似的问题，在IE10外部CSS文件。我通过给查询至少1px来修复它（0px似乎不起作用）。

它没有解决我的所有问题，但它可能是不够你的。

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

由于某些原因，IE正在加载时运行错误的媒体查询，仅仅是一瞬间，并且导致我的链接出现转换以快速闪烁错误的颜色。这固定它，但我真的不明白*为什么*它是需要的！虽然谢谢！ – 2014-03-25 20:00:18

这也适用于我。因为它的工作原理，我唯一的猜想是IE加载源文件或内嵌块脚本，然后再回去检查尺寸或认为它不必（或视口尺寸为0），所以它适用于任何在CSS中;但最小宽度的附加过滤器只是适用正确的趣味。自动布线，任何人？ :) – Michael 2015-01-07 22:55:54

非常感谢！我在IE11下运行的网站上遇到了同样的问题。添加最小宽度：1px条件可以正确呈现网站（或确保媒体查询被正确识别），而无需先调整浏览器窗口大小。 – Stradivari 2016-10-14 15:33:14

答

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

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