IE7, IE8 Support for CSS3 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.

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.

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.

CSS - media query in IE7

respond.js specifically states it can't parse media queries included via @import

https://github.com/scottjehl/Respond

"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."

IE(8 in 7-compat mode) uses @media print rule - on the screen

IE8 and below do not support media queries, so your issue might be related to an unclosed tag or conditional comment somewhere in your css or page. Run a CSS linter or validate your css to see if you catch any tags that might need closing.

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