Question

我创建了一个响应式电子邮件模板，问题是媒体查询在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

Answer 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/

Answer 2

我还看到IE 9是@media屏幕和（min-width：0 \ 0）{}

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

css3媒体查询不能在IE下面工作ie10

2 个答案: