CODEWITHSUNDEEP
htmlcssinternet-explorer
Mostaza
Mostaza

Reputation: 33

Media Query ONLY for IE

I am trying to ONLY change the CSS styling on Internet Explorer 10 >. I am using Media Query but it doesn't work.

I have inspected IE and the media query line with the change appear in the CSS file but for some reason it doesn't work.

What should I do in order to ONLY change my css style on IE?

//// MEDIA QUERY ///
@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
  body {
    background-color: red !important;
  }
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 480px) {}
<body>

  <div> HELLO </div>

</body>

Upvotes: 1

Views: 3242

Answers (1)

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

just declare it little different and it will work.

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {..}

you had double declaration after comma. tested it in IE11 and it works

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  body {
    background-color: red !important;
  }
}

@supports (-ms-ime-align: auto) {
  body {
    background-color: red !important;
  }
}
<div> HELLO </div>

Upvotes: 1

Related Questions