css3媒体查询在ie10以下的IE中不起作用答案

【问题标题】：css3 media query not working in IE below ie10css3媒体查询在ie10以下的IE中不起作用
【发布时间】：2014-12-29 23:13:08
【问题描述】：

我创建了一个响应式电子邮件模板，问题是媒体查询在 IE10 浏览器下无法运行。我使用 js 库使其运行，但它无法运行。

<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style type="text/css">
    @media screen and (max-width: 600px) {
        /*widths for standard blocks*/
        table[class=w15], td[class=w15], img[class=w15] {width:15px !important;}
        table[class=w170], td[class=w170], img[class=w170] {width:290px !important;}
        table[class=w180], td[class=w180], img[class=w180] {width:145px !important;}
        table[class=w200], td[class=w200], img[class=w200] {width:320px !important;}
    }
</style>

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

网页链接网址：
http://silista.in/praveen/template-1.html

【问题讨论】：

您使用table[class=w15] 而不是table.w15 是否有特殊原因？前者不适用于 IE9 之前的任何版本。
使用table[class=w15] 与table.w15 的原因是电子邮件提供商如何处理移动设备的类和样式。话虽如此，@cimmanon 是对的。您正在尝试在 Web 浏览器中测试电子邮件模板。您需要通过电子邮件程序发送测试或使用电子邮件提供商测试环境。此外，电子邮件程序将 100% 忽略您的 JS。
我同意@disin，因为您需要雅虎的 table[class=w15]。但是您不应该在 IE 中测试响应式电子邮件。最好的测试方法是每个客户端。一旦你在浏览器中得到完美，它在 Outlook 2003 和 2007 中看起来会有所不同。查看litmus.com/email-testing 进行测试，并同意你不能在电子邮件中使用 JS
@Travis 是的，我正在为雅虎使用 table[class=w15]。我将在不同的电子邮件客户端中检查它，如果它在那里工作正常，我会忘记 IE 浏览器。

标签： html css media-queries

【解决方案1】：

IE 的最佳媒体查询技巧是

 IE10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
 IE8 @media \0screen {}
 IE7 @media screen\9 {}

您可以在上述任何媒体查询中添加您的 IE 特定 CSS 代码。

在此处阅读更多信息：http://browserhacks.com/

【讨论】：

【解决方案2】：

我还看到 IE 9 是 @media screen 和 (min-width:0\0) {}

问题 - 您可以在样式标签中添加该 sn-p 代码，还是还需要在 { } 之间添加所有适用的 CSS？

【讨论】：