IE7, IE8 support for css3 media query

Question

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?

score 30 · Answer 1 · edited Dec 15 '16 at 09:26

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.

Update

css3-mediaqueries-js is moved on github

score 3 · Answer 2 · answered Sep 12 '14 at 04:07

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.

score 2 · Answer 3 · answered May 15 '15 at 15:44

<!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>

THE IMPORTANT POINTS FOR THE ABOVE TO WORK:: – evan toder May 15 '15 at 15:45 — evan toder, May 15 '15 at 15:45

score 1 · Answer 4 · answered Aug 13 '13 at 09:50

1

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.

answered Aug 13 '13 at 09:50

Netsurfer

5,543
2
29
34

with due respect- even respond.js is not working too. My hunt for the fix goes on. – guyan Aug 14 '13 at 04:06
Where and how do you load/ integrate your CSS Stylesheet and the respond.js script in your HTML document? And have you made sure, that the style inside the Media Query is not overwritten by another style? – Netsurfer Aug 15 '13 at 08:01
I am writing like:

– guyan Aug 19 '13 at 08:14
1

Well, that's the problem ... ;-) Cite:"Respond.js doesn't parse CSS refrenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing." Try to include your **external** CSS file by using a **link** element. Then the script should work. – Netsurfer Aug 21 '13 at 11:57
"Anyway, why would you still support IE 7 nowadays?" well, sometimes aren't us who define this, it's just "orders from above".. – Andre Figueiredo Oct 07 '14 at 01:48
@Netsurfer "Anyway, why would you still support IE 7 nowadays?" because not everyone has the same demographics in their userbase - more than 10% of our page hits are still IE7 - then again, we only make it functional, not pretty, and have a nice message for these people to tell them they should upgrade to something more secure – HorusKol Jan 05 '15 at 03:12
@HorusKol I would certainly not, not even IE 8 (nowadays). At the time of writing I still did. But it was the original question ...! – Netsurfer Jan 05 '15 at 09:52
Out of interest - do you know what you visitor usage stats are? We'd be alienating one third of our userbase if we didn't make some consideration for IE7 and IE8. – HorusKol Jan 05 '15 at 22:12

score 0 · Answer 5 · edited May 23 '17 at 12:30

0

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

edited May 23 '17 at 12:30

Community

1
1

answered Aug 13 '13 at 09:47

Akki619

2,386
6
26
56

IE7, IE8 support for css3 media query

5 Answers5

Linked