Targeting IE 10 and 11+

When targeting IE 10 and 11+ using " @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}, it works in first media query but is being ignored in the next media query that I have set. Is this common? Is this a query that really should only be used once? If so is there a different way I can target IE 10 and 11+?

You will need to show an example of the usage you have employed as the code seems to work on its own.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body {
	background:red
}
}
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
p {
	background:blue
}
}
</style>
</head>

<body>
<p>test</p>
</body>
</html>

However, the real issue is why you feel that you need to target IE11 and it would be better if we could solve the problem without using hacks which are likely to break at some time in the future?

Normally I wouldn’t target IE 11, as IE 11 really isn’t that bad to work with. However the website I’m styling is written using .net framework /ASPX, so trying to make it responsive has been a bit of challenge.

So in some cases, I’m having to target IE 11. I did find another way to target IE 11+…

Your above example, I had created a test of that myself, before posting this initial question, which worked for me, so as to why I couldn’t get it work within my queries, kinda stumps me… I will have to look into that later.

Are you over-riding the styles later on or have you got styles that have more specificity elsewhere? Just because you have some rules in a media query doesn’t mean that they will win out over more specific rules.

I still think that your problem would be solvable without hacks and you need to be careful that the hack you add will not break future IE browsers (or indeed IE edge that has been recently released).

Here lies my problem. I wasn’t given access to entire website. I have access to the majority of it, such as most of the style sheets, but I don’t have any access to the .dll files or the root file. So I a lot of these styles are really specific and I’ve over written a couple of them.

You can always check in the web inspector to see which rules are winning out and see what there specificity is. As a last resort !important can be added to rules but soon gets messy if you are not careful.

Without seeing the code or site in question its hard to help with anything but vague advice :smile:

Fair enough! Web inspector is my best friend lol :stuck_out_tongue:

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