在 css 中定位 IE 11 不起作用答案

【问题标题】：Targeting IE 11 in css not working在 css 中定位 IE 11 不起作用
【发布时间】：2016-05-30 20:56:24
【问题描述】：

我正在尝试修复 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

【问题讨论】：

为什么不通过删除yardstick6 元素上的float: left 来解决问题？

标签： html css internet-explorer internet-explorer-11

【解决方案1】：

以下应该可以解决您的问题。这个想法是应用特定于 IE 的 CSS。

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

【讨论】：

欢迎来到 SO！请始终解释您的解决方案 - 仅代码的答案可能会被否决和/或删除。如需更多指导，请参阅stackoverflow.com/help/how-to-answer

【解决方案2】：

尝试像这样只使用(-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

【讨论】：