Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html css3媒体查询在ie10以下的IE中不起作用_Html_Css_Media Queries - Fatal编程技术网

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

Html css3媒体查询在ie10以下的IE中不起作用,html,css,media-queries,Html,Css,Media Queries,我已经创建了一个响应电子邮件模板,问题是媒体查询在低于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">

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

@媒体屏幕和屏幕(最大宽度:600px){
/*标准砌块的宽度*/
表[class=w15],td[class=w15],img[class=w15]{宽度:15px!重要;}
表[class=w170],td[class=w170],img[class=w170]{宽度:290px!重要;}
表[class=w180],td[class=w180],img[class=w180]{宽度:145px!重要;}
表[class=w200],td[class=w200],img[class=w200]{宽度:320px!重要;}
}
Web链接url:

IE最好的媒体查询方法是

 IE10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
 IE8 @media \0screen {}
 IE7 @media screen\9 {}
您可以在上述任何媒体查询中添加特定于IE的CSS代码


阅读更多信息:

我还看到IE9是@media屏幕和(最小宽度:0\0){}


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

您使用
table[class=w15]
而不是
table.w15
?前者在IE9之前的版本中不起作用。使用
table[class=w15]
vs
table.w15
的原因是电子邮件提供商如何处理移动设备的类和样式。尽管如此,@cimmanon是对的。您正在尝试在web浏览器中测试电子邮件模板。您需要通过电子邮件程序或使用电子邮件提供商测试环境发送测试。此外,电子邮件程序将100%忽略你的JS。我同意@disi,因为你需要雅虎的表[class=w15]。但你不应该在IE中测试响应电子邮件。最好的测试方法是每个客户机。一旦在浏览器中实现完美,它在outlook 2003和2007中的外观将有所不同。检查测试,并同意您不能在中使用JSemails@Travis是的,我正在为yahoo使用表[class=w15]。我将在不同的电子邮件客户端中检查这一点,如果它在那里运行良好,那么我将忘记IE浏览器。