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 (below) but no luck. I've also tried conditional code, various hacks etc. But nothing worked or affected all browsers. I've spent a couple of hours trying various solutions without any luck and ran out of ideas. Need help please. Layout issue illustrated

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

The web page can be seen here with password:quote321

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
}