css - IE9 在加载非外部 CSS 时加载了错误的媒体查询信息

Question

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

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

在 Firefox 中一切正常，宽度为 768 像素及以下的 CSS 仅在应呈现时呈现。但是，在 IE9 中，无论大小如何，此媒体查询中的 CSS 都会在加载时呈现。

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

有谁知道这到底是怎么回事，或者是否有快速修复方法？我能想到的唯一解决方案是通过重新排序我的 CSS 并添加新的媒体查询来解决这个问题，为了便于更新代码，我想避免这样做。

Answer 1

我在 ie10 中的外部 css 文件也有类似的问题。我通过给查询至少 1px(0px 似乎不起作用)来修复它。

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

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