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?
CSS media query not working in IE 9
Do you have compatibility mode turned on?
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 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.
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
Media queries not working with ie & phones
This problem has now been solved. After deleting and tweaking files and sifting through support forums for answers, I looked at the stylesheet. It turns out I was missing a closing bracket inside a media query.
/Facepalm...
Related Topics
Change the Number of Columns and Rows in a Grid as the Number of Items Increase
Preventing Horizontal Scrolling in Mobile Devices
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
Right Aligned Bootstrap Container Which Also Aligns with Default Container
How to Remove the Underline of a Link in Chrome Using CSS
Position Element at Bottom Right Corner of Current Window
Reset Angle of Text in Skewed Div Using CSS
How to Add Zig Zag Border to a Box Contains Background Image
Horizontal and Vertical Center Text in HTML
Generic @Mixin for SASS with Multiple and Varied Values
Why Is the Two P-Tags Not Beside Each Other When the Screen Is Wide
How to Make CSS Sourcemapping Work in Chrome with Compass (Sass)
How to Change Image a When Hovering Over Image B Without JavaScript Only CSS
How to Put Text Inside Radio Button