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
How to Get "Position:Fixed" CSS to Work in IE 7+ with Transitional Doctype
CSS Selector (Id Contains Part of Text)
Convert 8-Digit Hex Colors to Rgba Colors
Bootstrap 4 Navbar and Content Fill Height Flexbox
CSS Two Div Width 50% in One Line with Line Break in File
Nesting Pseudo-Elements Inside Pseudo-Elements
Rails 4: How to Use SASS Mappings
Animate CSS Background-Position with Smooth Results (Sub-Pixel Animation)
When Using "Height: 100Vh" for the Container, Vertical Scrollbar Appears
I Need an Overflow to Truncate from the Left, with Ellipses
::Before Pseudo-Element Stacking Order Issue
How Can a Variable-Height Sticky Footer Be Defined in Pure CSS
What's the Difference Between HTML[Lang="En"] and HTML:Lang(En) in CSS
Background Images: How to Fill Whole Div If Image Is Small and Vice Versa
What Does Font-Size Really Correspond To