问题
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?
回答1:
Include this meta tag in the <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.
<!--[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
Update
css3-mediaqueries-js is moved on github
回答2:
In general, the steps to resolve are a combination of JS plugins, conditional comments and a testing environment.
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
<!--[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
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
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.
回答3:
<!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>回答4:
I have not tried the css3-mediaqueries.js! Maybe you give respond.js a try. This actually works for IE 6-8 which natively do not support Media Queries (see 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).
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.
回答5:
To my knowledge, I think media queries are not supported for IE7 and IE8.
See here
Just came across this thread, there may be workaround for this.
Original Post here: IE8 support for CSS Media Query
来源：https://stackoverflow.com/questions/18205253/ie7-ie8-support-for-css3-media-query