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将默认为兼容模式，并且随后将无效。

Answer 2

据我所知，IE9没有解释“min-device-width”和“max-device-width”。

根据http://msdn.microsoft.com/library/ms530813.aspx，它不支持这些属性，只支持“min-width”和“max-width”。

此外，http://www.w3.org/TR/css3-mediaqueries/#error-handling表示浏览器应该忽略它无法识别的属性。 IE9似乎并非如此。

Answer 3

是的，请使用@media (max-width: 860px)代替max-device-width。

IE 9刚给我心脏病发作。项目媒体查询无效。

然后在谷歌搜索几分钟后，你必须在HTML中包含CSS。仅限内联样式！

这些IE浏览器有多么拖累！

Answer 4

我通常将此添加到我的项目中，到目前为止它一直在为我工作：

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Answer 5

IE兼容模式解决了这个问题。转到兼容性视图设置并禁用在兼容性视图中显示Intranet网站选项。

媒体查询无法在IE9中运行

5 个答案: