在CSS中定位IE 11无法正常工作

Question

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

我已经向样式表添加了媒体查询（如下），但是没有运气。我也尝试过条件代码，各种破解等。但是没有任何效果或影响所有浏览器。我已经花了几个小时尝试各种解决方案，但运气不佳，想法也用光了。请需要帮助。说明了布局问题

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

该网页可以在此处看到，密码为：quote321

Answer 1

尝试(-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的BrowserHacks

注意：要轻松修复，您可以float:left从#yardstick6