Understanding @media and MS IE 9

Question

I'm working through trying to get a scroll box to adjust its height depending on its width so that a web page looks good on laptops as well as large screens. Getting pages to look the same across IE, Firefox, and Chrome is vexing.

I am using the following, which works fine with Firefox and Chrome. It has no affect on IE;

@media(max-width:1366px)
        {
        .scroll 
                {
                max-height: 400px;
                overflow-y: auto;
                overflow-x: hidden;
                }
        }
@media(min-width:1824px)
        {
        .scroll 
                {
                max-height: 600px;
                overflow-y: auto;
                overflow-x: hidden;
                }
        }

Is there anything that can be added to this syntax to make it work with IE? I'm currently doing this without javascript because, frankly, I don't know much about JS yet.

IE9 supports media query: http://caniuse.com/#feat=css-mediaqueries — Bhojendra Rauniyar, Aug 28 '14 at 13:29
Try Looking here: http://stackoverflow.com/questions/6917639/css-media-query-not-working-in-ie-9 — RayGe, Aug 28 '14 at 13:29

score 1 · Accepted Answer · edited May 23 '17 at 10:25

Media queries are supported in IE from version 9 proof here.

The media query you might be feeling that won't working is because you may be using IE Developer tool and switching to compatibility mode.

If you test in actual version of ie9 then you should get working css.

The best solution I've found is Respond.js especially if your main concern is making sure your responsive design works in IE8. It's pretty lightweight at 1kb when min/gzipped and you can make sure only IE8 clients load it:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

source

css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script's site) it "doesn't work on @imported stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements".

In the same vein you have the simpler Respond.js, which enables only min-width and max-width media queries.

source

Understanding @media and MS IE 9

1 Answers1