在 css 中定位 IE 11 不起作用

Posted 2023-03-06

【中文标题】在 css 中定位 IE 11 不起作用

【英文标题】：Targeting IE 11 in css not working

【发布时间】：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 来解决问题？

【参考方案1】：

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

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

【讨论】：

欢迎来到 SO！请始终解释您的解决方案 - 仅代码的答案可能会被否决和/或删除。如需更多指导，请参阅***.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