在CSS中定位IE 11无法正常工作 [英] Targeting IE 11 in css not working

问题描述

我正在尝试解决IE11中的一个微小布局问题，其中滑块的点跳出了它的位置（在其他主要浏览器中都很好）

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;
    }
  }

可以在此处，密码为：quote321

The web page can be seen here with password:quote321

推荐答案

尝试仅使用（-ms-high-contrast：none）像这样：

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

或：-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>

请参见用于IE的浏览器

注意：要轻松修复，您可以删除 float：left 来自＃yardstick6

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

这篇关于在CSS中定位IE 11无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！