Targeting IE 11 in css not working

Question

I\'m trying to fix a tiny layout issue in IE11 where slider pip jumps out of its place (it\'s fine in the rest of major browsers)

I\'ve added media query to stylesheet (

Answer 1

Try using just (-ms-high-contrast: none) like this:

@media screen and (-ms-high-contrast: none) {
  #yardstick-text-6-1 {
    margin-top: -43px;
  }
  #yardstick6-1 {
    margin-top: -53px;
  }
}

or :-ms-fullscreen,:root .selector:

_:-ms-fullscreen,
:root #yardstick-text-6-1.ie11 {
  margin-top: -43px;
}
_:-ms-fullscreen,
:root #yardstick-6-1.ie11 {
  margin-top: -53px;
}

<div id="yardstick6-1" class="ie11">
  <div id="yardstick-text6-1" class="ie11"></div>
</div>

See BrowserHacks for IE

Note: To fix easily you can remove float:left from #yardstick6

Answer 2

The following should solve your problem. The idea is to apply CSS specific to IE.

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