如何在 CSS 中检测 IE 和 Edge 浏览器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43528940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to detect IE and Edge browsers in CSS?
提问by AlreadyLost
Is there an standard way to detect IE and Edge browsers in css? I saw responses for detecting in javascript file but I am looking for one in css
是否有一种标准方法可以在 css 中检测 IE 和 Edge 浏览器？我在 javascript 文件中看到了检测响应，但我正在 css 中寻找响应
回答by Claire
For IE 9 and lower, load a conditional stylesheet:
对于 IE 9 及更低版本，加载条件样式表：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
IE 10 and up doesn't support this, so you have to use media queries:
IE 10 及更高版本不支持此功能，因此您必须使用媒体查询：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
}
For Edge 12-15:
对于边缘 12-15：
@supports (-ms-accelerator:true) {
/* Edge 12+ CSS */
}
EDIT
编辑
For Edge 16+
适用于 Edge 16+
@supports (-ms-ime-align:auto) {
/* Edge 16+ CSS */
}
回答by Jarrod Drysdale
The accepted answer for Edge isn't working in Edge 16.
Edge 的公认答案在 Edge 16 中不起作用。
This alternative works:
这种替代方法有效：
@supports (-ms-ime-align:auto) {
/* IE Edge 16+ CSS */
}
Via https://stackoverflow.com/a/32202953
通过https://stackoverflow.com/a/32202953
(Adding new answer as I don't have comment privileges.)
（添加新答案，因为我没有评论权限。）
回答by JusMalcolm
Not sure about edge, but to target ie 10/11 you can use:
不确定边缘，但要针对即 10/11，您可以使用：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//styles
}
回答by MR_AMDEV
For supporting edge 12+ and 16+ as one liner
用于支撑边缘 12+ 和 16+ 作为一个衬垫
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
// your css here
}
回答by Blarzek
All in one:
一体：
@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 {
/* ... */
}
}
