CSS 如何在样式表中仅针对 IE（任何版本）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28417056/
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 target only IE (any version) within a stylesheet?
提问by MetalPhoenix
I have an inherited project and there are places where it's an utter mess. This is one of them. I need to target only IE (any version).
我有一个继承的项目，有些地方完全一团糟。这是其中之一。我只需要针对 IE（任何版本）。
#nav li {
float: left;
height: 54px;
background: #4f5151;
display: table;
border-left: 1px solid grey;
}
To be clear: Insidethe embedded stylesheet and withoutadding ID's or classes to the tags in the html, I need to apply the border style onlyif the user is using IE. How can I do this?
需要明确的是：在嵌入的样式表中并且没有向 html 中的标签添加 ID 或类的情况下，只有当用户使用 IE 时，我才需要应用边框样式。我怎样才能做到这一点？
Edit: found a solution for Firefox, editing question to reflect this.
编辑：找到了 Firefox 的解决方案，编辑问题以反映这一点。
回答by Jay Patel
Internet Explorer 9 and lower :You could use conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that you wanted to specifically target.like below using external stylesheet.
Internet Explorer 9 及更低版本：您可以使用条件注释为您想要专门针对的任何版本（或版本组合）加载特定于 IE 的样式表。如下所示，使用外部样式表。
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
However, beginning in version 10, conditional comments are no longer supported in IE.
但是，从版本 10 开始，IE 不再支持条件注释。
Internet Explorer 10 & 11 :Create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
Internet Explorer 10 和 11：使用 -ms-high-contrast 创建媒体查询，在其中放置 IE 10 和 11 特定的 CSS 样式。因为 -ms-high-contrast 是 Microsoft 特定的（并且仅在 IE 10+ 中可用），所以它只会在 Internet Explorer 10 及更高版本中解析。
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12 :Can use the @supports rule Here is a link with all the info about this rule
Microsoft Edge 12：可以使用@supports 规则 这是有关此规则的所有信息的链接
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
Inline rule IE8 detection
内联规则 IE8 检测
I have 1 more option but it is only detect IE8 and below version.
我还有 1 个选项，但它只能检测 IE8 及以下版本。
/* For IE css hack */
margin-top: 10px /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
As you specefied for embeded stylesheet. I think you need to use media query and condition comment for below version.
正如您为嵌入式样式表指定的那样。我认为您需要对以下版本使用媒体查询和条件评论。
回答by Darkseal
Here's a collection of media queries that will allow you to do that for any version of Internet Explorer (from IE6 to IE11+), Firefox, Chrome & Safari (EDIT: also added Opera).
这是一组媒体查询，可让您对任何版本的 Internet Explorer（从 IE6 到 IE11+）、Firefox、Chrome 和 Safari（编辑：还添加了 Opera）执行此操作。
IE 6
浏览器 6
* html .ie6 { property: value; }
or
或者
.ie6 { _property: value; }
IE 7
浏览器 7
*+html .ie7 { property: value; }
or
或者
*:first-child+html .ie7 { property: value; }
IE 6 and 7
IE 6 和 7
@media screen {
.ie67 {
property: value;
}
}
or
或者
.ie67 { *property: value; }
or
或者
.ie67 { #property: value; }
IE 6, 7 and 8
IE 6、7 和 8
@media html>/**/body .ie8 { property: value; }
screen\,screen {
.ie678 {
property: value;
}
}
IE 8
浏览器 8
@media .ie8 { property /*\**/: value }
screen {
.ie8 {
property: value;
}
}
or
或者
@media screen@media screen and (min-width:0@media screen and (min-width:0@media screen and (min-width:0_:-ms-lang(x), .ie10 { property: value; }
) {
.ie910 {
property: value;
} /* backslash-9 removes ie11+ & old Safari 4 */
}
) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}
) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{
property: value;
}
}
{
.ie8910 {
property: value;
}
}
IE 8 Standards Mode
IE 8 标准模式
_:-ms-lang(x), .ie10up { property: value; }
IE 8,9 and 10
IE 8,9 和 10
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up {
property:value;
}
}
IE 9 only
仅 IE 9
_:-ms-fullscreen, :root .ie11up { property: value; }
IE 9 and above
IE 9 及以上
@-moz-document url-prefix() {
.ff {
color: red;
}
}
IE 9 and 10
IE 9 和 10
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
.ffStylo {
property: value;
}
}
}
IE 10 only
仅 IE 10
@-moz-document url-prefix() {
@supports not (animation: calc(0s)) {
/* Gecko */
.ffGecko {
property: value;
}
}
}
IE 10 and above
IE 10 及以上
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;
}
or
或者
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
IE 11 (and above..)
IE 11（及以上..）
_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;
}
Firefox (any version)
火狐（任何版本）
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@media {
.safari6 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Firefox (Quantum Only / Stylo)
Firefox（仅限 Quantum / Stylo）
@media not all and (min-resolution:.001dpcm) {
@media {
.safari10 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Firefox Legacy (pre-Stylo)
Firefox Legacy（Stylo 之前）
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .selector {
.opera12 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Webkit (Chrome & Safari, any version)
Webkit（Chrome 和 Safari，任何版本）
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.opera11 {
color:#0000FF;
background-color:#CCCCCC;
}
}
Google Chrome (29+)
谷歌浏览器 (29+)
@media screen
@import ie_styles
@media screen@supports (-ms-ime-align:auto)
@import ie_styles
@supports (-ms-accelerator:auto)
@import ie_styles
@import ie_styles
Safari (7.1+)
Safari (7.1+)
@mixin ie-only {
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@content;
}
}
Safari (from 6.1 to 10.0)
Safari（从 6.1 到 10.0）
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
Safari (10.1+)
Safari (10.1+)
html[data-useragent*='MSIE 10.0'] body .my-class{
margin-left: -0.4em;
}
Opera (12+)
歌剧 (12+)
@media screen and (min-width:0@media screen@media all##代码## {
.selector { rule: value };
}
{
.selector { rule: value };
}
) and (min-resolution:+72dpi), ##代码##screen\,screen {
.selector { rule: value };
}
Opera (11 and lower)
歌剧（11 及以下）
##代码##For further info or additional media queries, visit the browserhacks.comweb site and/or check out this blog postthat I wrote on this topic.
如需更多信息或其他媒体查询，请访问browserhacks.com网站和/或查看我针对此主题撰写的这篇博文。
回答by minlare
When using SASSI use the following 2 @media queriesto target IE 6-10 & EDGE.
使用时SASS我使用以下 2@media queries来定位 IE 6-10 & EDGE。
http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
Edit
编辑
I also target later versions of EDGE using @support queries(add as many as you need)
我还针对更高版本的 EDGE 使用@support queries（根据需要添加多个）
https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
回答by Ilham Moutaharik
For targeting IE only in my stylesheets, I use this Sass Mixin :
为了仅在我的样式表中定位 IE，我使用了这个 Sass Mixin ：
##代码##回答by Sahib Khan
Another working solution for IE specific styling is
IE 特定样式的另一个工作解决方案是
##代码##And then your selector
然后你的选择器
##代码##回答by ShortFuse
After experiencing issues with sites breaking on Edge when using High Contrast Mode, I came across the following work by Jeff Clayton:
在使用高对比度模式时遇到网站在 Edge 上中断的问题后，我遇到了 Jeff Clayton 的以下工作：
https://browserstrangeness.github.io/css_hacks.html
https://browserstrangeness.github.io/css_hacks.html
It's a crazy, weird media query, but those are easier to use in Sass:
这是一个疯狂的、奇怪的媒体查询，但它们在 Sass 中更容易使用：
##代码##This targets IE versions expect for IE8.
这针对 IE8 预期的 IE 版本。
Or you can use:
或者你可以使用：
##代码##Which targets IE8-11, but also triggers FireFox 1.x (which for my use case, doesn't matter).
它针对 IE8-11，但也会触发 FireFox 1.x（对于我的用例而言，这无关紧要）。
Right now I'm testing with print support, and this seems to be working okay:
现在我正在测试打印支持，这似乎工作正常：
##代码##