如何仅为特定的 IE 浏览器设置 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8874290/
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 can I set CSS only for specific IE browsers?
提问by henryaaron
I have a CSS/jQuery Checkbox style script: http://jsfiddle.net/BwaCD/
我有一个 CSS/jQuery 复选框样式脚本：http: //jsfiddle.net/BwaCD/
The problem is, in current browsers in order for the span to float over the input, the input's position must be absolute. But in IE8 & below, the script will not work and therefore I'm left with and absolutely positioned input that is just floating over other elements. I am not asking for the script to work in IE8 & below.
问题是，在当前的浏览器中，为了使跨度浮动在输入上，输入的位置必须是绝对的。但是在 IE8 及以下版本中，该脚本将不起作用，因此我留下了绝对定位的输入，该输入只是浮动在其他元素上。我不是要求脚本在 IE8 及以下版本中工作。
I want to know how I can use CSS to set a specific style if it is IE8 and below.I guess jQuery would be acceptable if it's necessary, but I don't think it is. I know this can be done with just CSS & HTML I just don't know how.
我想知道如果是 IE8 及以下，我如何使用 CSS 来设置特定样式。我想如果有必要，jQuery 是可以接受的，但我认为不是。我知道这可以只用 CSS 和 HTML 来完成，我只是不知道如何。
采纳答案by Adaz
How about that?
那个怎么样？
http://www.quirksmode.org/css/condcom.html
http://www.quirksmode.org/css/condcom.html
Or that if you don't like those statements
或者如果你不喜欢这些陈述
回答by Brilliand
Conditional comments would work (<!--[if lte IE 8]><stylesheet><![endif]-->), but if you want to do it all in the stylesheet, there is a way:
条件注释会起作用 ( <!--[if lte IE 8]><stylesheet><![endif]-->)，但是如果您想在样式表中完成所有操作，则有一种方法：
body {
color: red; /* all browsers, of course */
color: green; /* IE only */
}
The important thing here is the "\9", which has to be exactly "\9". I'm not clear on exactly why this is.
这里重要的是“\9”，它必须是“\9”。我不清楚这是为什么。
EDIT: The \9 hack isn't enough by itself. To exclude IE9, you also need the :roothack:
编辑： \9 hack 本身是不够的。要排除 IE9，您还需要:roothack：
:root body {
color: red; /* IE9 only */
}
Other browsers besides IE might support :root, so combine it with the \9 hack if you're using it to target IE9.
除了 IE 之外的其他浏览器可能支持:root，因此如果您使用它来定位 IE9，请将其与 \9 hack 结合使用。
回答by Peter O.
You can use Internet Explorer's conditional comments to add a class name to the HTML root tag for older IE browsers:
您可以使用 Internet Explorer 的条件注释为旧版 IE 浏览器的 HTML 根标记添加类名：
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Then you can define IE-specific CSS by referencing the appropriate class name, like this:
然后您可以通过引用适当的类名来定义特定于 IE 的 CSS，如下所示：
.ie8 body {
/* Will apply only to IE8 */
}
Source: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
资料来源：http: //paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
回答by Lucky
Target ALL VERSIONS of IE :
定位所有版本的 IE ：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
定位除 IE 之外的所有内容
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
仅针对 IE 7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
仅针对 IE 6
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
仅针对 IE 5
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
仅针对 IE 5.5
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
目标 IE 6 和更低
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
目标 IE 7 和更低
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
目标 IE 8 和更低
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
目标 IE 6 及更高版本
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
目标 IE 7 及更高版本
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
目标 IE 8 及更高版本
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
回答by Tom Brito
on the example: color : green\9;
在示例中： color : green\9;
\9didn't work for ie11, but \0worked!
\9对 ie11 不起作用，但\0有效！
回答by marxo
I have a useful solution for IE 10 and 11. The script checks for IE and version and then appends .ie10 or .ie11 class to the tag.
我有一个适用于 IE 10 和 11 的有用解决方案。脚本检查 IE 和版本，然后将 .ie10 或 .ie11 类附加到标记。
That way you can write specific rules like .ie10 .something {} and they get applied only when the browser is IE 10 or 11.
这样您就可以编写特定规则，例如 .ie10 .something {}，并且仅当浏览器为 IE 10 或 11 时才会应用它们。
Check it out, it's useful for graceful degradation, tested on a few commercial sites and not really hacky: http://marxo.me/target-ie-in-css
检查一下，它对于优雅降级很有用，在一些商业站点上进行了测试，并不是真正的 hacky：http: //marxo.me/target-ie-in-css
回答by Riccardo Volpe
I solved in this way for the grab cursor in Internet Explorer:
我以这种方式解决了 Internet Explorer 中的抓取光标：
.grab_cursor {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 8 and below */
*cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
_cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}
In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.
在 Windows 版本 8 及以下的 Internet Explorer 中，如果在外部样式表文件中指定了相对 URI 值，则基本 URI 被视为包含该元素的文档的 URI，而不是其中包含该元素的样式表的 URI。声明出现。
Files tree:
文件树：
index.html
css/style.css -> here the posted code
img/cursors/openhand.cur
Good references:
很好的参考：
