我想使用符合 W3C 的 CSS 来定位 IE7 和 IE8。有时修复一个版本的 CSS 并不能修复另一个版本。我怎样才能做到这一点？
问问题
139439 次
7 回答
165
使用 HTML 和 CSS 显式定位 IE 版本，无需 hack
如果您不想在 CSS 中添加 hack，请使用此方法。为元素添加一个浏览器唯一的类，<html>以便您以后可以根据浏览器进行选择。
例子
<!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>
然后在您的 CSS 中，您可以非常严格地访问您的目标浏览器。
例子
.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}
有关更多信息，请查看http://html5boilerplate.com/
使用 CSS“黑客”定位 IE 版本
更重要的是，这里有一些技巧可以让你瞄准 IE 版本。
使用 "\9" 来定位 IE8 及以下版本。
使用“*”来定位 IE7 及以下版本。
使用“_”来定位 IE6。
例子：
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
更新：目标 IE10
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>
于 2010-12-03T19:45:04.557 回答
21
我建议您查看有条件的评论，并为您遇到问题的 IE 制作单独的表格。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
于 2009-05-02T05:45:33.503 回答
9
你的问题的答案
选择除 IE8 及以下版本之外的所有浏览器的一种完全有效的方法是使用:root选择器。由于 IE 8 及以下版本不支持:root，因此包含它的选择器将被忽略。这意味着您可以执行以下操作：
p {color:red;}
:root p {color:blue;}
这仍然是完全有效的 CSS，但它确实会导致 IE8 及更低版本呈现不同的样式。
其他技巧
这是我能找到的所有完全有效的 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 */
:not([ie8min]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
学分和来源：
于 2014-01-07T21:27:56.207 回答
7
有关截至 2015 年的更完整列表：
即 6
* html .ie6 {property:value;}
或者
.ie6 { _property:value;}
即 7
*+html .ie7 {property:value;}
或者
*:first-child+html .ie7 {property:value;}
IE 6 和 7
@media screen\9 {
.ie67 {property:value;}
}
或者
.ie67 { *property:value;}
或者
.ie67 { #property:value;}
即 6、7 和 8
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
即 8
html>/**/body .ie8 {property:value;}
或者
@media \0screen {
.ie8 {property:value;}
}
仅限 IE 8 标准模式
.ie8 { property /*\**/: value\9 }
即 8,9 和 10
@media screen\0 {
.ie8910 {property:value;}
}
仅限 IE 9
@media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 及以上
@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 和 10
@media screen and (min-width:0) {
.ie910{property:value;}
}
仅限 IE 10
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10 及以上
_:-ms-lang(x), .ie10up { property:value; }
或者
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 11（及更高版本..）
_:-ms-fullscreen, :root .ie11up { property:value; }
Javascript 替代品
现代化
Modernizr 在页面加载时快速运行以检测功能；然后它创建一个带有结果的 JavaScript 对象，并将类添加到 html 元素
用户代理选择
Javascript：
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':'');
在元素中添加（例如）以下html内容：
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'
允许非常有针对性的 CSS 选择器，例如：
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
脚注
如果可能，请避免浏览器定位。识别并修复您发现的任何问题。支持渐进增强和优雅降级。考虑到这一点，这是一个“理想世界”的场景，并非总是可以在生产环境中获得，因此——上述内容应该有助于提供一些不错的选择。
归因/基本阅读
于 2015-01-06T12:29:45.007 回答
4
好吧，您不必担心 IE7 代码无法在 IE8 中运行，因为 IE8 具有兼容模式（它可以呈现与 IE7 相同的页面）。但是，如果您仍然想针对不同版本的 IE，现在已经使用了一段时间的方法是使用条件注释或以 * 开始您的 css 规则以针对 IE7 及以下版本。或者您可以关注服务器上的用户代理并根据该信息提供不同的 CSS 文件。
于 2009-05-02T05:44:29.450 回答
3
实际问题不是 IE8，而是您用于早期版本 IE 的 hack。
IE8 非常接近标准兼容，因此您根本不需要任何 hack，也许只需要一些调整。问题是如果你对 IE6 和 IE7 使用了一些 hack；您必须确保它们仅适用于这些版本而不适用于 IE8。
前段时间我做了我们公司的网站兼容IE8。我真正改变的唯一一件事是添加告诉 IE 页面符合 IE8 的元标记......
于 2009-05-02T06:17:14.910 回答
1
我是用 Javascript 做的。我在 html 元素中添加了三个 css 类：
ie<version>
lte-ie<version>
lt-ie<version + 1>
所以对于 IE7，它增加了ie7, lte-ie7..., lt-ie8...
这是javascript代码：
(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);
}
}
}
}
})();
此后，您.ie<version>在样式表中使用 css 类，如 potench 所述。
（在检查用户是否使用带有 jQuery 的 IE中使用了 Mario 的 detectIE 函数）
拥有 lte-ie8 和 lt-ie8 等的好处是它可以针对所有小于或等于 IE9 的浏览器，即 IE7 - IE9。
于 2014-04-02T15:33:49.423 回答