CSS 媒体查询在 IE9 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6418139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media query not working in IE9
提问by John Hansen
I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:
我有一个奇怪的问题，只发生在 IE9 上。我正在处理具有桌面布局和移动布局的网页。相同的 HTML，不同的 CSS。问题发生在以下代码中：
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.
除 IE9 外的所有浏览器都根据需要显示桌面站点。移动浏览器正确显示移动布局。IE9 的问题在于它还显示了移动布局。
Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.
现在，如果我从上面的代码中删除“only”和“screen”这两个词，IE9 就会正确显示桌面站点。问题是，那么移动浏览器也会显示桌面站点。我对此进行了一些研究，但没有看到有关此问题的任何内容。
Thanks for reading,
谢谢阅读，
John
约翰
回答by Scott Sword
Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9
以防万一有人正在寻找答案，以上两个答案并没有解决这里回答的核心问题 - CSS 媒体查询在 IE 9 中不起作用
Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -
基本上内联 CSS3 媒体查询确实可以在 IE9 中工作，但您必须禁用兼容模式 -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed beforeany other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
上述元标记需要放在任何其他元标记之前，否则 IE9 将默认启用兼容模式，随后将无法工作。
回答by benklocek
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
据我所知，它归结为 IE9 没有解释“最小设备宽度”和“最大设备宽度”。
According to http://msdn.microsoft.com/library/ms530813.aspxit does not support those properties, only "min-width" and "max-width".
根据http://msdn.microsoft.com/library/ms530813.aspx它不支持这些属性，只支持“最小宽度”和“最大宽度”。
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handlingstates that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
此外，http://www.w3.org/TR/css3-mediaqueries/#error-handling指出浏览器应该忽略它无法识别的属性。IE9 似乎并非如此。
回答by bernhard
Yes, use the @media (max-width: 860px)instead of max-device-width.
是的，使用@media (max-width: 860px)代替max-device-width。
IE 9 just gave me a heart attack. The project media queries did not work.
IE 9 刚刚让我心脏病发作。项目媒体查询不起作用。
Then after some minutes of googling, you have to include the CSS in the HTML. Inline styles only!
然后经过几分钟的谷歌搜索，您必须在 HTML 中包含 CSS。仅内联样式！
What a drag these IE browsers are!
这些 IE 浏览器真是太拖沓了！
回答by Diego
I usually add this to my projects and it's been working for me so far:
我通常将它添加到我的项目中，到目前为止它一直在为我工作：
<!--[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]-->
回答by stpolit
IE compatibility mode solves the issue. Go to Compatibility View Settingsand disable the option Display intranet sites in Compatibility View.
IE兼容模式解决了这个问题。转到兼容性视图设置并禁用在兼容性视图中显示 Intranet 站点选项。
