Targeting IE 11 in css not working

问题:

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

回答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

回答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
}