Geek Answers Handbook

Support IE7, IE8 for css3 media queries

I tried:

@media screen and (max-width:1024px) { .sidebar{width:630px;} }

to get a fix for IE7 and 8, but it doesn’t work, where it works for IE9 and other browsers. Is there any other way to write this. I tried to enable jss css3mediaqueries, but failed. Is there any support for IE7 and IE8?

+3
internet-explorer-8 css3 internet-explorer-7 media-queries
source share
5 answers

Include this meta tag in the <head>.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or later does not support multimedia query. You can use media-queries.js or reply.js to add support for media queries in IE.

 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

I think these two links will help you.

Update

css3-mediaqueries-js moves to github

+29
source share

In general, the steps to solve are a combination of JS plugins, conditional comments, and a test environment.

I have successfully used response.js to support media queries, you can download it from github. - Use conditional comments to avoid adding this to modern browsers.

 <!--[if lt IE9]> <script src="..directory-path/respond.js"> <![endif]-->

Depending on how detailed you want CSS3 support you can configure PIE.htc - css3pie.com

Finally, to better understand the problems and results, review your browser testing options:

Setting up a virtual machine - https://modern.ie/en-us/virtualization-tools#downloads - This was 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 still not as reliable as a virtual machine.

+3
source share

 <!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>
+2
source share

I have not tried css3-mediaqueries.js! You might give answer.js a try. This really works for IE 6-8, which initially does not support Media Queries (see Can I use ... ).

Anyway, why do you still support IE 7 at the moment? Every system that still works with IE 7 can be upgraded to IE 8. And also a reserve for modern CSS3 layout features like Flexbox greatly simplifies IE 8 support for "display: table-xy" (which is not supported by IE 7).

Personally, I do not use Shims / Polyfills for the main layout, because, in my opinion, it is counterproductive to make CSS layout depending on Javascript support.

+1
source share

As far as I know, I think media queries are not supported for IE7 and IE8.

See here

Just stumbled upon this stream, perhaps it will cost.

Original post here: IE8 support for CSS Media request

0
source share

More articles:


All Articles