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

Question

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

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

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

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

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

score 16 · Accepted Answer

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

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

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

score 2 · Accepted Answer

我遇到了在 IE 10 中发生的类似问题。为媒体查询设置最小值无助于解决这个特定问题。我使用了一些 js 将窗口大小调整为完全相同的大小，它解决了 IE 遇到的问题。感觉有点脏，但确实有效。

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

您只能使用此修复程序定位 IE9：

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

4 回答 4