Targeting IE 11 in css not working

Martyna va

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

dippas

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related