如何在CSS中检测IE和Edge浏览器？

Question

有没有一种标准的方式可以在CSS中检测IE和Edge浏览器？我看到了检测javascript文件中的回复，但我正在寻找CSS中的一种方法。

- AlreadyLost

---

可能是 https://dev59.com/xlwY5IYBdhLWcg3wyqaH 的重复问题。 - flamusdiu

Answer 1

对于IE 9及以下版本，请加载一个条件样式表：

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE10及以上版本不支持此功能，因此您需要使用媒体查询：

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

对于Edge 12-15版本：

@supports (-ms-accelerator:true) {
   /* Edge 12+ CSS */ 
}

编辑

适用于 Edge 16+ 版本

@supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */ 
}

- Claire

---

假设我想检测是否为IE或Edge，那么背景就不应该是固定的，我该怎么办？ - AlreadyLost

你需要发布你的代码并解释你试图做什么。 - Claire

禁用IE和Edge的破碎视差效果 - AlreadyLost

谢谢。我可以再问一个问题吗？-ms-accelerator和-ms-ime-align:auto有什么区别？我刚刚在Edge中看到有人提到了这个。谢谢。 - AlreadyLost

两者都是纯粹的CSS hack。基本上，您正在检查浏览器是否支持特定功能，方法是通过“嗅探”来实现。在这种情况下，ms-accelerator是Edge支持的硬件加速器，而ms-align-auto对齐输入法编辑器。它们的作用与您的情况无关。重点是您可以使用它们来嗅探浏览器并应用条件CSS。我离题了，这可能是暂时的。随着新的浏览器版本和功能的发布，您将需要更新这些“hack”。JavaScript功能检测是前进的最佳方式。谷歌一下。 - Claire

谢谢Tom的帮助。 - AlreadyLost

Answer 2

Edge的被接受答案在Edge 16中无效。

这个替代方案可行：

@supports (-ms-ime-align:auto) {
    /* IE Edge 16+ CSS */ 
}

通过 https://dev59.com/xlwY5IYBdhLWcg3wyqaH#32202953 发布的新答案。

- Jarrod Drysdale

---

谢谢您提供这个，我已将其添加到被接受的答案中。 - Claire

Answer 3

不确定是否涉及Edge浏览器，但是如果要针对IE 10/11版本进行操作，可以使用以下代码：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //styles
}

- JusMalcolm

Answer 4

支持Edge 12+和16+的单行代码。

@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
     // your css here
}

- MR_AMDEV

Answer 5

全能型:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active),
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
    /* All CSS is here */
    .example {
        /* ... */
    }
}

- Blarzek

---

对于样式类 .example，在 Internet Explorer 10/11 和 Edge 12+ 中应用所需的样式。 - Blarzek