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

Posted 2023-03-06

【中文标题】如何在 CSS 中检测 IE 和 Edge 浏览器？

【英文标题】：how to detect IE and Edge browsers in CSS?

【发布时间】：2017-09-17 15:26:42

【问题描述】：

是否有标准的方法来检测 css 中的 IE 和 Edge 浏览器？我看到了在 javascript 文件中检测的响应，但我正在 css 中寻找一个

【问题讨论】：

***.com/questions/32201586/…的可能重复

【参考方案1】：

对于 IE 9 及更低版本，加载条件样式表：

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

IE 10 及更高版本不支持此功能，因此您必须使用媒体查询：

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

对于边缘 12-15：

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

编辑

适用于 Edge 16+

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

【讨论】：

假设我要检测是IE还是Edge，那么backgournd不应该被修复，我该怎么办？

你必须发布你的代码并解释你想要做什么。

禁用 IE 和 Edge 的破碎视差

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

两者都是简单的 CSS hack。基本上，您通过“嗅探”来检查浏览器是否支持特定功能。本例中ms-accelerator是edge支持的硬件加速器，ms-align-auto对齐输入法编辑器。他们所做的与你的情况无关。关键是您可以使用它们来嗅探浏览器并应用条件 CSS。不过我离题了，这可能是暂时的。随着新浏览器版本和功能的发布，您将需要更新这些“黑客”。 Javascript 特征检测是最好的方法。谷歌一下。

【参考方案2】：

Edge 的公认答案在 Edge 16 中不起作用。

这种替代方法有效：

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

通过https://***.com/a/32202953

（添加新答案，因为我没有评论权限。）

【讨论】：

谢谢您，我已将其添加到接受的答案中

【参考方案3】：

不确定边缘，但可以使用 10/11 的目标：

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

【参考方案4】：

用于支持边缘 12+ 和 16+ 作为一个衬垫

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

【参考方案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 
        /* ... */
    

【讨论】：

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