Media Query Not Working in IE9

CSS media query not working in IE 9

Do you have compatibility mode turned on?

Media queries not working in specific IE query

It looks like you are trying to target IE 10+, so try using the all selector instead of the screen selector.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
}

If you're trying to target IE 9 or below, you'll have to load a conditional stylesheet, like so:

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

You can find more detail about this and other Microsoft browsers here:

how to detect IE and Edge browsers in CSS?

IE9 ignoring *some* media queries in same stylesheet

Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.

Sigh of relief.

Google Chrome picking up IE9 specific media queries

As explained in the linked question media queries are media queries and not browser queries and therefore you simply should not even try this. Because what you are searching for is complicated hacks. They are hard to test and they will make your project hard to maintain.

Beside the fact that I really feel sorry for you that you still have to support IE9 I would recommend one of the following solutions:

1) Use conditionals

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie-only.css">
<![endif]-->

This is probably the best way. Microsoft knows IE is bad and this is why they have introduced them. An important bonus: All other browsers do not have to download shitty IE9 CSS.

2) Use a class on the HTML-body (with JavaScript)

var browser = {
isIe: function () {
return navigator.appVersion.indexOf("MSIE") != -1;
},
navigator: navigator.appVersion,
getVersion: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1)
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
return version;
}
};

if (browser.isIe() && browser.getVersion() == 9) {
document.body.className += ' ' + 'ie9';
}

In your CSS you simply do:

.ie9 #my-elem-to-style {

}

The simple rules of CSS specificity will solve your problem then.

3) Use a library if it is applicable (e.g. Modernizr)

IE9 css media queries not working properly...Works fine everywhere else

I fixed it. It seems like there were two things causing problems with IE. First I moved the default code for errors to another another media query for 481 and more:

@media screen and (min-width: 481px) {
#my-form .error {
position: absolute;
width: 150px;
right: -171px;
margin-right: -20px;
top: 50%;
}
}

And then I used floats instead of inline-block. Seems like IE still has problems with inline-block:

@media screen and (max-width: 480px) {
#my-form label {
text-align: left;
display: block;
padding-bottom: .3em;
}
#my-form .error {
float: left; // Here
clear: left;
top: 100%;
margin-top: 4px;
width: 200px;
}
}

Demo: http://jsfiddle.net/elclanrs/BMz9U



Related Topics



Leave a reply



Submit