IE 执行小设备规则的 CSS 媒体查询答案

【问题标题】：IE executes small-device ruled css media queryIE 执行小设备规则的 CSS 媒体查询
【发布时间】：2012-03-24 18:49:48
【问题描述】：

IE 6-7-8 (dunno 9) 执行这个 css 而不考虑媒体规则..

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 680px), only screen and (max-device-width: 680px)" href="styles/small-device.css" />

这个没问题：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 680px)" href="styles/small-device.css" />

为什么？

我有这个：

<meta name="viewport" content="width=device-width,initial-scale=1">

【问题讨论】：

标签： css internet-explorer media-queries

【解决方案1】：

这是因为这个媒体查询是一个CSS3特性，IE并不完全支持，尤其是IE6（根本不支持）。

您应该尝试使用浏览器嗅探进行条件资源加载。因为 IE6、7、8 不用于小型设备，所以您可以将两者结合使用。 IE9用于WP7

<!--[if lte IE 8]>
<style type="text/css" media="screen"/>

<![endif]-->
<!--[if !(lte IE 8)]>
<style type="text/css" media="screen and (min-device-width: 450px)"/>

<![endif]-->

http://www.akademy.co.uk/blog/2010/03/css-style-ie6-media-hack/

更新：我的建议是对所有 IE 安全地使用非小屏幕 CSS 是安全的，因为它们在小屏幕设备上不可用。

如果您想将它用于调整大小的浏览器，那么这在 IE 中是不可能的，除非您在 CSS 中使用 jscript（动态属性）。例如：

div {
  min-height: 300px;

  /* simulates min-height in IE6 */
  _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}

【讨论】：

为您解答。我只是想知道为什么后者有效而上述无效。顺便说一句，我用的是modernizr，所以如果我用的是工作的，它在IE6-7中也很好用。
IE 不应将样式应用于它无法识别的媒体，因此您的答案在这里似乎不合适。
好主意！第二种样式将不适用，因为 IE 无法识别它
问题是它确实如此，即使它不应该。
为什么 IE 会被混淆很难说。众所周知，IE 解析器很奇怪并且有错误。可能较长的媒体规则会像错误的属性一样受到威胁并被忽略，从而有效地删除它并且始终加载 css。