问题
I have created a responsive email template and the problem is media queries are not working in below IE10 browser. I have used js library to make it run but it is not working.
<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>
Web link url:
http://silista.in/praveen/template-1.html
回答1:
Best media query hacks for IE would be
IE10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
IE8 @media \0screen {}
IE7 @media screen\9 {}
You can add your IE specific CSS code within any of the media queries above.
Read more here: http://browserhacks.com/
回答2:
I also saw IE 9 is @media screen and (min-width:0\0) {}
Question - Can you just add that snippet of code in the style tags or do you also need to add all applicable CSS in between the { }?
来源：https://stackoverflow.com/questions/20957167/css3-media-query-not-working-in-ie-below-ie10