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

Question

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

中寻找一个

Answer 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 */ 
}

编辑

对于边缘 16+

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

Answer 2

不确定边缘，但要定位 ie 10/11，您可以使用：

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

Answer 3

已接受的 Edge 答案在 Edge 16 中不起作用。

这个替代方案有效：

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

通过

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

Answer 4

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

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

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 {
        /* ... */
    }
}

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

how to detect IE and Edge browsers in CSS?

css

browser

internet-explorer

microsoft-edge