CSS IE7、IE8 支持 css3 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18205253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE7, IE8 support for css3 media query
提问by guyan
I have tried :
我试过了 ：
@media screen and (max-width:1024px) {
.sidebar{width:630px;}
}
to get the fix for IE7 and 8 but its not working, where as it works for IE9 and other browsers. Is there a different way of writing this. I have tried to include the css3mediaqueries js as well but no success. Is there any support at all for IE7 and IE8?
获得 IE7 和 8 的修复，但它不起作用，因为它适用于 IE9 和其他浏览器。有没有不同的写法。我也尝试包含 css3mediaqueries js，但没有成功。是否支持 IE7 和 IE8？
回答by Soorajlal K G
Include this meta tag in the <head>.
在 <head> 中包含这个元标记。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE.
Internet Explorer 8 或更早版本不支持媒体查询。您可以使用 media-queries.js 或 respond.js 在 IE 中添加媒体查询支持。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
I think this two links will help you.
我认为这两个链接会对您有所帮助。
- http://cssmatter.com/blog/ie7-and-ie8-support-for-css3-media-query/
- http://webdesignerwall.com/tutorials/responsive-design-in-3-steps/comment-page-2
- http://cssmatter.com/blog/ie7-and-ie8-support-for-css3-media-query/
- http://webdesignerwall.com/tutorials/responsive-design-in-3-steps/comment-page-2
Update
更新
css3-mediaqueries-js is moved on github
css3-mediaqueries-js 移到github 上
回答by codeslinger
In general, the steps to resolve are a combination of JS plugins, conditional comments and a testing environment.
一般来说，解决的步骤是JS插件、条件注释和测试环境的组合。
I have successfully used respond.js for media query support, you can download it from github. - use conditional comments to avoid adding this in modern browsers
我已经成功使用了 response.js 来支持媒体查询，你可以从 github 下载。- 使用条件注释来避免在现代浏览器中添加它
<!--[if lt IE9]>
<script src="..directory-path/respond.js">
<![endif]-->
Depending on how detailed you want to get with supporting CSS3, you might set up PIE.htc - css3pie.com
根据您希望获得支持 CSS3 的详细程度，您可以设置 PIE.htc - css3pie.com
Finally, in order to get a better grasp on the problems and results, look into browser testing options:
最后，为了更好地掌握问题和结果，请查看浏览器测试选项：
Set up a VM - https://modern.ie/en-us/virtualization-tools#downloads- This has been a very successful method for me and I consider it the most reliable method
设置 VM - https://modern.ie/en-us/virtualization-tools#downloads- 这对我来说是一个非常成功的方法，我认为它是最可靠的方法
Browserstack - you can set up a trial account for 30 days; it's a good tool but as before, it's not as reliable as the VM.
Browserstack - 您可以设置一个试用帐户 30 天；这是一个很好的工具，但和以前一样，它不如 VM 可靠。
回答by evan toder
<!DOCTYPE html>
<html>
<head>
<title>New Page 1</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style>
body {
background-color: #FFF;
color: #000;
font: 1.1em/2.0em Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#outer {
border: 1px solid red;
margin: 1% auto;
padding: 10px;
max-width: 1000px;
min-width: 310px;
text-align: center;
}
.box {
border: 1px solid green;
display: inline-block;
float: left;
padding: 1%;
text-align: left;
width: 310px;
0
}
.clear {
clear: both;
}
@media screen and (max-width: 1030px) {
#outer {
width: 660px;
}
}
@media screen and (max-width: 550px) {
#outer {
width: 320px;
}
}
</style>
<!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="outer">
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="clear"></div>
</div>
<!-- outer -->
</body>
</html>回答by Netsurfer
I have not tried the css3-mediaqueries.js! Maybe you give respond.jsa try. This actually works for IE 6-8 which natively do not supportMedia Queries (see Can I use ...).
我没试过css3-mediaqueries.js！也许您可以尝试一下response.js。这实际上适用于本机不支持媒体查询的IE 6-8 （请参阅Can I use ...）。
Anyway, why would you still support IE 7 nowadays? Each system still running an IE 7 may be updated to IE 8. And also the fallback for modern CSS3 layout features like Flexbox is much easier cause of IE 8 support for 'display: table-xy' (which is not supported by IE 7).
无论如何，为什么您现在仍然支持 IE 7？每个仍在运行 IE 7 的系统可能会更新到 IE 8。而且现代 CSS3 布局功能（如 Flexbox）的回退更容易，因为 IE 8 支持“display: table-xy”（IE 7 不支持） .
Personally I do not use any Shims/ Polyfills for the basic layout because in my opinion it is counterproductive to make the CSS layout depending on Javascript support.
我个人不使用任何 Shims/Polyfills 作为基本布局，因为在我看来，根据 Javascript 支持来制作 CSS 布局会适得其反。
回答by Akki619
To my knowledge, I think media queries are not supported for IE7 and IE8.
据我所知，我认为 IE7 和 IE8 不支持媒体查询。
See here
看这里
Just came across this thread, there may be workaround for this.
刚刚遇到这个线程，可能有解决方法。
Original Post here: IE8 support for CSS Media Query
