媒体查询在IE9中不工作

我遇到了一个奇怪的问题，只发生在IE9中。我正在研究一个具有桌面布局和移动布局的网页。相同的HTML，不同的CSS。问题发生在下面的代码中：媒体查询在IE9中不工作

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

所有浏览器（IE9除外）根据需要显示桌面站点。移动浏览器正确显示移动版式。 IE9的问题在于它还显示了移动版面。

现在，如果我从上面的代码中删除单词“唯一”和“屏幕”，IE9将正确显示桌面网站。问题是，那么移动浏览器也会显示桌面站点。我已经对此做了一些研究，并且在这个问题上没有看到任何东西。

感谢您的阅读，

约翰

来源

2011-06-20 John Hansen

[“IE9，退出该移动样式表，你是一个桌面浏览器，你甚至不在Windows Phone上。”]（http://knowyourmeme.com/memes/Buzzkilling） – BoltClock

从我可以告诉，它归结为IE9不解释“分设备宽度”和“最大设备宽度”。

根据http://msdn.microsoft.com/library/ms530813.aspx它不支持这些属性，只有“最小宽度”和“最大宽度”。

另外，http://www.w3.org/TR/css3-mediaqueries/#error-handling指出浏览器应该忽略它无法识别的属性。看起来不像IE9。

来源

2011-07-19 19:48:20 benklocek

至于现在的链接你已经提供给[msdn]（http://msdn.microsoft.com/library/ms530813.aspx）描述了'device-width'特性+ [CSS3测试]（http：// css3test。com /）说IE9支持'device-width'。所以它的工作。 –

是的，使用@media (max-width: 860px)而不是max-device-width。

IE 9刚刚给了我一个心脏病发作。项目媒体查询不起作用。

然后经过几分钟的搜索后，您必须将CSS包含在HTML中。只有内联样式！

这些IE浏览器是什么拖拽！

来源

2012-11-12 22:40:12 bernhard

万一有人被SO爬行的答案，上述两个答案没有解决其在这里回答的核心问题 - CSS media query not working in IE 9

基本上直列CSS3媒体查询不要在IE9工作，但你有禁用了兼容性模式 -

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

上述meta标签需要放在之前的任何其他meta标签，否则IE9将默认兼容模式并随后将无法正常工作。

来源

2013-03-15 21:48:12 Swordfish0321

甚至在'之前？ – Saul

这帮了我.. – Xarcell

这在我的情况下不起作用。非常令人沮丧。 –

我通常将它添加到我的项目，它已经为我工作至今：

<!--[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]-->

来源

2013-04-30 18:40:32 Diego

有趣的，因为这个目标版本的IE *少于* 012。 –

这对我有效。也在IE 9上。 – KWorrall

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

来源

2016-08-01 07:54:32 stpolit

媒体查询在IE9中不工作

回答

相关问题