css - 媒体查询在 IE9 中不起作用

Question

我遇到了一个只有 IE9 才会出现的奇怪问题。我正在处理具有桌面布局和移动布局的网页。相同的 HTML，不同的 CSS。问题发生在下面的代码中:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)

除 IE9 外，所有浏览器都会根据需要显示桌面站点。移动浏览器正确显示移动布局。 IE9 的问题在于它还显示移动布局。

现在，如果我从上面的代码中删除单词“only”和“screen”，IE9 就会正确显示桌面站点。问题是，移动浏览器也会显示桌面站点。我已经对此进行了一些研究，但在这个问题上还没有看到任何东西。

感谢阅读，

约翰

Answer 1

以防万一有人正在抓取 SO 的答案，以上两个答案并没有解决这里回答的核心问题 - CSS media query not working in IE 9

基本上，内联 CSS3 媒体查询确实可以在 IE9 中运行，但您必须禁用兼容模式 -

<meta http-equiv="X-UA-Compatible" content="IE=9">

上述元标记需要放置在任何其他元标记之前，否则 IE9 将默认打开兼容模式，随后将无法工作。