Ie8 Support For CSS Media Query

IE8 support for CSS Media Query

Internet Explorer versions before IE9 do not support media queries.

If you are looking for a way of degrading the design for IE8 users, you may find IE's conditional commenting helpful. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

This won't allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.

Media Queries with Internet Explorer 8

Let's gather some info around the net...

In Bootstrap's test file here http://getbootstrap.com/getting-started/#template there are some lines in code which say:

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Drupal page here https://www.drupal.org/node/2173441 says:

Due to browser security rules, Respond.js doesn't work with pages
viewed via the file:// protocol (like when opening a local HTML file).
To test responsive features in IE8, view your pages over HTTP(S). See
the Respond.js docs for details.

So, lets go where we should be from the very beginning...The official docs :D
Respond.js doc

...which say, among others,

Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark
(BOM), they will not work with Respond.js in IE7 or IE8. Noted in
issue #97

WARNING: Including @font-face rules inside a media query will cause
IE7 and IE8 to hang during load. To work around this, place @font-face
rules in the wide open, as a sibling to other media queries.

...So if you have a problem with respond.js and ie8 be sure to make a quick check on all of the above and of course, read the official doc.

also worth reading: http://nextflow.in.th/en/keep-your-responsive-web-design-against-the-legendary-internet-explorer-ie6ie7ie8/using-response-js-to-make-ie6ie7ie8-understand-your-responsive-design/

Put response.js after all CSS you use in web page. Except you are
ready for weird action.

Response.js has an issue with CDN & domain.

How can i make media Query work in IE7 and IE8

Your best bet will probably be using a JS library. Respond.js (https://github.com/scottjehl/Respond) is a great solution for media queries for IE8 and lower. One word of caution: its written pretty narrowly (only has support for min-width and max-width queries) but should have enough for the basics.

IE8 and REM based Media Queries

IE8 doesn't support media queries either, so it's not that the polyfill is turning them off, it's just that IE8 simply doesn't support them.

What did Chuck mean with saying "to ignore MQ rules when the polyfill was kicked in, since support would only be required at desktop". So when the polyfill kicked in MQ support was dropped? And why would MQ support in IE8 only be needed for desktop?

He means that IE8 only runs on the desktop, so there's no point supporting it in a responsive way.

Can it not be that some users don't have the browser window fully open but just one half or quarter of the screen and thus have a smaller screen-width? I don't have my browser at full size most of the time to be able to do work in the other windows etc.

Okay, so maybe there is a point to supporting it in a responsive way, but it's not a good enough reason for the developer -- he decided that the extra difficulty in adding this support would be too much work to make it worthwhile.

He does say in the ticket that if anyone else wants to do the work and submit the code changes, then he'll consider bringing them into the library, but he's not going to do it.

How much work is it?

Well, it's worth pointing out again that IE8 doesn't support media queries. So in order to get MQs at all in IE8, you need to use another polyfill library such as RespondJS.

Therefore, the work of making IE8 REMs work with MQs is actually work to make the REM polyfill and RespondJS know about each other and work together -- there's a good chance that you'd need to make changes to both libraries to make it work at all. It could be very difficult to do. I can certainly understand why they decided not to bother.

So as things stand, I think you are going to have to accept that what you want to do is not possible in IE8. Unless you want to start hacking around in the polyfill libraries to fix it for yourself.

Media Queries not working in Internet Explorer ie6-ie8

That's because media queries aren't supported in IE6 through to IE8.

This polyfill, called Respond.js, may help you however - https://github.com/scottjehl/Respond.

Respond.js - A fast & lightweight polyfill for min/max-width CSS3
Media Queries (for IE 6-8, and more)

Here's a demo example.

---

Related Topics