如何使用有效的 CSS 定位 IE7 和 IE8？
Posted
技术标签:
【中文标题】如何使用有效的 CSS 定位 IE7 和 IE8？【英文标题】：How does one target IE7 and IE8 with valid CSS? 【发布时间】：2010-10-23 06:55:25 【问题描述】：我想使用符合 W3C 的 CSS 来定位 IE7 和 IE8。有时修复一个版本的 CSS 并不能修复另一个版本。我怎样才能做到这一点？
【问题讨论】：
Scroll down to my answer 获取仅将样式应用于特定浏览器的完整列表。 【参考方案1】：使用 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 “Hacks”定位 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>
【讨论】：
非常酷。我将把它复制到我的 Evernote 帐户中以供参考。 不幸的是，除了无效的 CSS 之外，IE9 和 IE10 还将应用\9 声明。
第一个例子你是不是缺少ie7？
编辑为包含 ie7 的条件
另一个答案要好得多，你不想在你的主css中包含垃圾，最好有一个 bad.css 用于糟糕的浏览器。【参考方案2】：
我建议您查看条件 cmets 并为您遇到问题的 IE 制作单独的表格。
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
【讨论】：
【参考方案3】：你的问题的答案
选择除 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 */
来源和来源：
http://css-tricks.com/snippets/css/browser-specific-hacks/ https://en.wikipedia.org/wiki/CSS_hack http://www.webdevout.net/css-hacks MDN：:first-child；
:root;
:first-of-type;
:not();
:any();
* ~ *
【讨论】：
【参考方案4】：如需更完整的 2015 年列表：
IE 6
* html .ie6 property:value;
或
.ie6 _property:value;
IE 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;
IE 6、7 和 8
@media \0screen\,screen\9
.ie678 property:value;
IE 8
html>/**/body .ie8 property:value;
或
@media \0screen
.ie8 property:value;
仅限 IE 8 标准模式
.ie8 property /*\**/: value\9
IE 8,9 和 10
@media screen\0
.ie8910 property:value;
仅限 IE 9
@media screen and (min-width:0) and (min-resolution: .001dpcm)
// IE9 CSS
.ie9property:value;
IE 9 及以上
@media screen and (min-width:0) and (min-resolution: +72dpi)
// IE9+ CSS
.ie9upproperty:value;
IE 9 和 10
@media screen and (min-width:0)
.ie910property: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)
.ie10upproperty:value;
IE 11（及更高版本..）
_:-ms-fullscreen, :root .ie11up property:value;
javascript 替代品
Modernizr
Modernizr 在页面加载时快速运行以检测功能；然后 使用结果创建一个 JavaScript 对象，并将类添加到 html元素
User agent selection
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;
脚注
如果可能，请避免浏览器定位。识别并修复您发现的任何问题。支持progressive enhancement和graceful degradation。考虑到这一点，这是一个“理想世界”场景，并非总是可以在生产环境中获得，因此，以上内容应该有助于提供一些不错的选择。
署名/必读
Keith Clarke Paul Irish Web Devout The Spanner【讨论】：
【参考方案5】：您不必担心 IE7 代码无法在 IE8 中运行，因为 IE8 具有兼容模式（它可以呈现与 IE7 相同的页面）。但是，如果您仍然想针对不同版本的 IE，现在已经使用了一段时间的方法是使用 conditional comments 或 begin your css rule with a * to target IE7 and below。或者您可以关注服务器上的用户代理并根据该信息提供不同的 CSS 文件。
【讨论】：
谢谢.. 但是使用 * hack 是无效的 W3C CSS 。所以这可能是问题。和条件评论是有用的解决方案。但它创建了更大版本的 HTML 文件.. 我们创建 Diff CSS 可能也是如此。像 IE7.css ，IE8 有没有条件注释。再次感谢 Apphacker【参考方案6】：真正的问题不是 IE8，而是您在 IE 早期版本中使用的 hack。
IE8 非常接近于标准兼容，因此您根本不需要任何 hack，也许只需要一些调整。问题是如果你对 IE6 和 IE7 使用了一些 hack；您必须确保它们仅适用于这些版本，而不适用于 IE8。
我前段时间让我们公司的网站兼容IE8。我真正改变的唯一一件事是添加告诉 IE 页面符合 IE8 的元标记...
【讨论】：
哦，听起来不错。你能告诉我们..什么META标签。 兼容 X-UA 的元标记：msdn.microsoft.com/en-gb/library/cc817574.aspx +1 确实，IE 8 的问题要少得多，而且不需要太多“跨浏览器”。 IE 9 非常棒，与 Chrome 形成了激烈的竞争。 IE8 不符合标准。它无法处理边界半径或 svg。这是一个石器时代的浏览器。 @Morg.：您不能指望旧浏览器符合在浏览器发布后添加的标准。即使它很古老，您也必须考虑有多少人仍在使用它。【参考方案7】：我是用 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 所述。
（在Check if user is using IE with jQuery中使用了马里奥的detectIE功能）
拥有 lte-ie8 和 lt-ie8 等的好处是它可以针对所有小于或等于 IE9 的浏览器，即 IE7 - IE9。
【讨论】：
以上是关于如何使用有效的 CSS 定位 IE7 和 IE8？的主要内容，如果未能解决你的问题，请参考以下文章
即使触发了 hasLayout，CSS 不透明度也无法在 IE7 或 IE8 中工作