如何使用有效的 CSS 定位 IE7 和 IE8？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/814219/
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 does one target IE7 and IE8 with valid CSS?
提问by Wasim Shaikh
I want to target IE7 and IE8 with W3C-compliant CSS. Sometimes fixing CSS for one version does not fix for the other. How can I achieve this?
我想使用符合 W3C 的 CSS 来定位 IE7 和 IE8。有时，为一个版本修复 CSS 并不能为另一个版本修复。我怎样才能做到这一点？
回答by potench
Explicitly Target IE versions without hacks using HTML and CSS
使用 HTML 和 CSS 明确定位 IE 版本，无需黑客攻击
Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <html>element so you can select based on browser later.
如果您不想在 CSS 中进行 hack，请使用此方法。向<html>元素添加浏览器唯一的类，以便您稍后可以根据浏览器进行选择。
Example
例子
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head></head>
<body></body>
</html>
Then in your CSS you can very strictly access your target browser.
然后在您的 CSS 中，您可以非常严格地访问您的目标浏览器。
Example
例子
.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}
For more information check out http://html5boilerplate.com/
有关更多信息，请查看http://html5boilerplate.com/
Target IE versions with CSS "Hacks"
使用 CSS "Hacks" 定位 IE 版本
More to your point, here are the hacks that let you target IE versions.
更重要的是，这里有一些让你定位 IE 版本的技巧。
Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.
使用 "\9" 定位 IE8 及以下。
使用“*”来定位 IE7 及以下。
使用“_”来定位 IE6。
Example:
例子：
body {
border:1px solid red; /* standard */
border:1px solid blue; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
Update: Target IE10
更新：目标 IE10
IE10 does not recognize the conditional statements so you can use this to apply an "ie10" class to the <html>element
IE10 无法识别条件语句，因此您可以使用它来将“ie10”类应用于<html>元素
<!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
<head></head>
<body></body>
</html>
回答by scragar
I would recommend looking into conditional comments and making a separate sheet for the IEs you are having problems with.
我建议查看条件注释并为您遇到问题的 IE 制作单独的表格。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
回答by Joeytje50
The answer to your question
你的问题的答案
A completely valid way to select all browsers but IE8 and below is using the :not()pseudo-class. Since IE versions 8 and below do not support :not(), selectors containing it are ignored. This means you could do something like this:
选择除 IE8 及更低版本之外的所有浏览器的一种完全有效的方法是使用:not()伪类。由于 IE 8 及以下版本不支持:not()，包含它的选择器将被忽略。这意味着你可以做这样的事情：
p {color:red;}
p:not([ie8min]) {color:blue;}
This is still completely valid CSS, but it does cause IE8 and lower to render different styles (and also Opera<9.5 and Safari<3.2).
这仍然是完全有效的 CSS，但它确实导致 IE8 及更低版本呈现不同的样式（以及 Opera<9.5 和 Safari<3.2）。
Other tricks
其他技巧
Here's a list of all completely valid CSS browser-specific selectors I could find, exceptfor some that seem quite redundant, such as ones that select for just 1 type of ancient browser (1, 2):
这是我能找到的所有完全有效的 CSS 浏览器特定选择器的列表，除了一些看起来非常多余的选择器，例如只选择一种类型的古代浏览器 ( 1, 2) 的选择器：
/****** First the hacks that target certain specific browsers ******/
* html p {color:red;} /* IE 6- */
*+html p {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
} /* Chrome, Safari 3+ */
p, body:-moz-any-link {color:red;} /* Firefox 1+ */
:-webkit-any(html) p {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p {color:red;} /* Firefox 4+ */
/****** And then the hacks that target all but certain browsers ******/
html> body p {color:green;} /* not: IE<7 */
head~body p {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p {color:green;} /* not: IE<8 */
body:first-of-type p {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
Credits & sources:
学分和来源：
回答by SW4
For a more complete list as of 2015:
有关截至 2015 年的更完整列表：
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：
ie<version>
lte-ie<version>
lt-ie<version + 1>
Adds (e.g) the below to the htmlelement:
将（例如）以下添加到html元素中：
(function () {
function getIEVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var trident = ua.indexOf('Trident/');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
} else if (trident > 0) {
// IE 11 (or newer) => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
} else {
return NaN;
}
};
var ieVersion = getIEVersion();
if (!isNaN(ieVersion)) { // if it is IE
var minVersion = 6;
var maxVersion = 13; // adjust this appropriately
if (ieVersion >= minVersion && ieVersion <= maxVersion) {
var htmlElem = document.getElementsByTagName('html').item(0);
var addHtmlClass = function (className) { // define function to add class to 'html' element
htmlElem.className += ' ' + className;
};
addHtmlClass('ie' + ieVersion); // add current version
addHtmlClass('lte-ie' + ieVersion);
if (ieVersion < maxVersion) {
for (var i = ieVersion + 1; i <= maxVersion; ++i) {
addHtmlClass('lte-ie' + i);
addHtmlClass('lt-ie' + i);
}
}
}
}
})();
Allowing very targetted CSS selectors, e.g.:
允许非常有针对性的 CSS 选择器，例如：
##代码##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 Guffa
The actual problem is not IE8, but the hacks that you use for earlier versions of IE.
实际问题不是 IE8，而是您用于早期 IE 版本的 hacks。
IE8 is pretty close to be standards compliant, so you shouldn't need any hacks at all for it, perhaps only some tweaks. The problem is if you are using some hacks for IE6 and IE7; you will have to make sure that they only apply to those versions and not IE8.
IE8 非常接近于符合标准，因此您根本不需要对其进行任何修改，也许只需要进行一些调整。问题是你是否对 IE6 和 IE7 使用了一些 hacks；您必须确保它们仅适用于这些版本而不适用于 IE8。
I made the web site of our company compatible with IE8 a while ago. The only thing that I actually changed was adding the meta tag that tells IE that the pages are IE8 compliant...
前段时间我把我们公司的网站做成了兼容IE8。我真正改变的唯一一件事是添加元标记，告诉 IE 页面是 IE8 兼容的......
回答by Bjorn
Well you don't really have to worry about IE7 code not working in IE8 because IE8 has compatibility mode (it can render pages the same as IE7). But if you still want to target different versions of IE, a way that's been done for a while now is to either use conditional commentsor begin your css rule with a * to target IE7 and below. Or you could pay attention to user agent on the servers and dish up a different CSS file based on that information.
好吧，您真的不必担心 IE7 代码在 IE8 中不起作用，因为 IE8 具有兼容模式（它可以呈现与 IE7 相同的页面）。但是，如果您仍然希望针对不同版本的 IE，那么现在已经采用的一种方法是使用条件注释或以 * 开始您的 css 规则以针对 IE7 及以下版本。或者您可以关注服务器上的用户代理，并根据该信息提供不同的 CSS 文件。
回答by Tahir Hassan
I did it using Javascript. I add three css classes to the html element:
我是用 Javascript 做到的。我向 html 元素添加了三个 css 类：
##代码##So for IE7, it adds ie7, lte-ie7..., lt-ie8...
所以对于 IE7，它增加了ie7, lte-ie7..., lt-ie8...
Here is the javascript code:
这是javascript代码：
##代码##Thereafter, you use the .ie<version>css class in your stylesheet as described by potench.
此后，您.ie<version>在样式表中使用css 类，如 potench 所述。
(Used Mario's detectIE function in Check if user is using IE with jQuery)
（在Check if user is using IE with jQuery 中使用了 Mario 的 detectIE 功能）
The benefit of having lte-ie8 and lt-ie8 etc is that it you can target all browser less than or equal to IE9, that is IE7 - IE9.
拥有 lte-ie8 和 lt-ie8 等的好处是它可以定位所有小于或等于 IE9 的浏览器，即 IE7 - IE9。
