我有一个奇怪的问题，只有 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 就会正确显示桌面站点。问题是，移动浏览器也会显示桌面站点。我已经对此进行了一些研究，但还没有看到有关此问题的任何内容。
谢谢阅读，
约翰
以防万一有人正在抓取这个答案，以上两个答案并没有解决这里回答的核心问题 - CSS 媒体查询在 IE 9 中不起作用
基本上内联 CSS3 媒体查询确实可以在 IE9 中工作，但您必须禁用兼容模式 -
<meta http-equiv="X-UA-Compatible" content="IE=9">
上述元标记需要放在任何其他元标记之前，否则 IE9 将默认打开兼容模式，随后将无法工作。
据我所知，归结为 IE9 没有解释“min-device-width”和“max-device-width”。
根据http://msdn.microsoft.com/library/ms530813.aspx它不支持这些属性，只支持“最小宽度”和“最大宽度”。
此外，http://www.w3.org/TR/css3-mediaqueries/#error-handling声明浏览器应该忽略它无法识别的属性。IE9 似乎并非如此。
是的，使用@media (max-width: 860px) 代替max-device-width。
IE 9 刚刚让我心脏病发作。项目媒体查询不起作用。
然后在谷歌搜索几分钟后，您必须在 HTML 中包含 CSS。仅限内联样式！
这些 IE 浏览器是多么的拖累啊！
我通常将它添加到我的项目中，到目前为止它一直在为我工作：
<!--[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]-->
IE兼容模式解决了这个问题。转到兼容性视图设置并禁用在兼容性视图中显示 Intranet 站点选项。