如何单独为 IE9 定义特定的 CSS 规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7364891/
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 define specific CSS rules for IE9 alone?
提问by user632347
Friends, please help me in defining specific css rule for IE9? For example like this
朋友，请帮我为IE9定义特定的css规则？例如像这样
/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
回答by SW4
Note the accepted answer also targets IE10. As such, for a more complete list:
请注意，接受的答案也针对 IE10。因此，要获得更完整的列表：
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) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
{
.ie8910 {property:value;}
}
IE 8 Standards Mode Only
仅限 IE 8 标准模式
@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 8,9 and 10
IE 8,9 和 10
@media screen and (min-width:0) {
.ie910{property:value;}
}
IE 9 only
仅 IE 9
_:-ms-lang(x), .ie10 { property:value; }
IE 9 and above
IE 9 及以上
_:-ms-lang(x), .ie10up { property:value; }
IE 9 and 10
IE 9 和 10
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 10 only
仅 IE 10
_:-ms-fullscreen, :root .ie11up { property:value; }
IE 10 and above
IE 10 及以上
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
or
或者
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
IE 11 (and above..)
IE 11（及以上..）
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Javascript alternatives
Javascript 替代品
Modernizr
现代化
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element
Modernizr 在页面加载时快速运行以检测功能；然后它使用结果创建一个 JavaScript 对象，并将类添加到 html 元素
User agent selection
用户代理选择
The Javascript:
Javascript：
:root
Adds (e.g) the below to the htmlelement:
将（例如）以下添加到html元素中：
:root #element { color:pink <!--[if ie 9]>
your stuff here
<![endif]-->
/IE9; } /* IE9 */
Allowing very targetted CSS selectors, e.g.:
允许非常有针对性的 CSS 选择器，例如：
html .twit-post .delete_note a
{
background-position-y: 2px;
}
html .twit-post .delete_note a:hover
{
background-position-y: -14px;
}
Footnote
脚注
If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancementand graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.
如果可能，请避免浏览器定位。确定并解决您发现的任何问题。支持渐进增强和优雅降级。考虑到这一点，这是一个在生产环境中并不总是可以获得的“理想世界”场景，因此 - 以上应该有助于提供一些不错的选择。
Attribution / Essential Reading
归因/基本阅读
回答by simon
You can prepend the CSS style with
您可以在 CSS 样式前面加上
<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
to make it IE9-specific, like this:
使其特定于 IE9，如下所示：
<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->
回答by Madara's Ghost
使用IE 条件注释：
margin-right: -15px; /* This fails */
margin-right: ~"-18px"; /* This passes */
回答by Harsh
\9 is a "CSS hack" specific to Internet Explorer.
\9 是特定于 Internet Explorer 的“CSS hack”。
This simply means that the one specific line of CSS ending with a \9;
这只是意味着一行以 \9; 结尾的特定 CSS 行；
In your example, If your CSS looked like this...
在您的示例中，如果您的 CSS 看起来像这样...
##代码##The result would be background-position-y: -14px; in IE 9
结果将是 background-position-y: -14px; 在 IE 9
回答by Ahmad Hajjar
I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)
我认为你可以做同样的事情，就像你想为 IE6 编写特定代码但说 IE9 一样:)
##代码##回答by HymanJoe
use conditional CSS:
(place the code above the <head>on your html, and IE9 will read that extra CSS file)
使用条件 CSS：（将代码<head>放在 html上方，IE9 将读取该额外的 CSS 文件）
This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.
这意味着该方法是使用新的 CSS 文件而不是类中的 hack，这保证了 CSS 是有效的。
回答by White Rabbit
I found that in some cases using negative values (when using a compiler to compile LESS files) using:
我发现在某些情况下使用负值（当使用编译器编译 LESS 文件时）使用：
##代码##回答by rufus2021
You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.
您不应该需要针对 IE9。它能够处理现代 css，不应被黑客入侵。这是一种过时的开发方法。
