以css中的IE 11为目标无法工作

Question

我正在尝试修复IE11中的一个小布局问题，即滑块pip跳出它的位置(它在其他主要浏览器中都很好)

我已经将媒体查询添加到样式表中(如下所示)，但没有成功。我也尝试过条件代码，各种破解等等，但是都没有起作用或者影响到所有的浏览器。我花了几个小时尝试各种解决方案，但没有任何运气，也没有想法。我需要帮助。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;
    }
  }

该网页可通过here查看，密码为: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>

请参阅BrowserHacks for IE

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

Answer 2

下面的方法可以解决你的问题。这个想法是将CSS应用于IE。

@media all and (-ms-high-contrast:active), all and (-ms-high-contrast:none) {
 //Your CSS
}