Using @media tags with IE

HTML & CSS
1

I am making use the @media tag in a web site. I can make them work with all browsers with the exception of IE. What I have been able to gather is that they do not work with IE below ver 8 and should work with IE above ver 9.

It has been very confusing and the results disappointing to say the least. Can anyone supply some good documentation on the subject or suggest a work-around.

I am trying to create a responsive web site and at the moment IE is giving me a great deal of trouble.

Thank you

2

You can add these scripts in your <head> to emulate @media queries in IE < 9 with Javascript:

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

Official websites of these libraries: html5shiv, css3-mediaqueries-js

2 Likes
3

You’re burning time/effort supporting responsive design on <= IE9. But if you still want to:

For IE9, you can try adding this meta to your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

That tells IE9+ browsers to use the latest rendering engine it has available (because IE will sometimes choose to use an ancient engine…not sure why). Source: http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

<= IE8 simply don’t support CSS media queries, but you can use a JavaScript polyfill that supports at least min-width, max-width: https://github.com/scottjehl/Respond

4

Thank you. I will try this, but I guess I did not make myself clear.

I cannot get the site to work correctly using IE 9, IE 10, or IE 11. That is the problem I am trying to solve. It does not work, at least correctly and I am trying to understand why.

The web site can be accessed at http://garyswoodturning.com/test/index.php

Go to the bowls page and then click on a product. I light box will open. In all major browsers the thing works, it is distorted in IE 10, which is what I am using. Also, the format is that for a mobile device no matter the size of the screen.

It maybe something as simple as a editor typo, but I am really confused.

Thank you

5

Argeed. I am just trying to get IE9+ to work. I am not at all interested in backward compatability

6

IE 11 looks fine to me

I don’t have IE 10 but using IE Tester it does look vertically stretched

Is this what you mean by “does not work” ?

7

Yes the elongation in IE10. The image does appear normal in IE11.

The text is also an issue. In both versions of the browser text appears outside the light box. Also the version of the text that appears is the mobile device version. Look at the site in any of the other major browsers to see things as they are intended.

This morning I am going to try to see if I can control things via javascript. I may be able to so, but if I succeed it occurs to me that I might as well scrap the @media tag as IE seems to make it useless. At least in this case

Thanks for looking into the matter.

8

Well, I abandoned the @media tags and by using javascript and a million conditions was able to solve the problem.

9

You might want to remove the invalid code at the top of some of your css files as that could significant issues.

//lightbox.css
//Light Box Script Cascading Style Sheet
//Written by Michael Phillips
//Komet Kommunications
//Version 1.00
//Copyright 2015 - All Rights Reserved

CSS comments are /* */ not //

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.