如何使用有效的CSS来定位IE7和IE8？

我想使用符合W3C的CSS来定位IE7和IE8。 有时修复一个版本的CSS不能修复其他版本。 我怎样才能做到这一点？

明确的目标IE版本不使用HTML和CSS的黑客

如果你不想在你的CSS中黑客使用这种方法。 将一个浏览器独有的类添加到<html>元素，以便稍后您可以select基于浏览器。

例 

 <!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/

目标IE版本与CSS“黑客”

更重要的是，这里是让你瞄准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>

我会build议寻找有条件的评论，并为您有问题的IE做一个单独的表。 

  <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->

你的问题的答案

一个完全有效的方法来select所有的浏览器，但IE8和以下是使用:not()伪类。 由于IE 8及以下版本不支持:not() ，因此包含它的select器将被忽略。 这意味着你可以做这样的事情： 

 p {color:red;} p:not([ie8min]) {color:blue;}

这仍然是完全有效的CSS，但它确实导致IE8和更低的呈现不同的风格（还有Opera <9.5和Safari <3.2）。

其他技巧

下面是我能find的所有完全有效的CSS浏览器特定select器的列表， 除了一些看起来相当多的select器，比如只select一种古代浏览器（ 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 */

信用和来源：

有关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 .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的

Modernizr在页面加载时可以快速运行以检测function; 然后创build一个包含结果的JavaScript对象，并将类添加到html元素中

用户代理select

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'

允许非常有针对性的CSSselect器，例如： 

 html[data-useragent*='Chrome/13.0'] .nav{ background:url(img/radial_grad.png) center bottom no-repeat; }

脚注

如果可能，请避免使用浏览器定位 确定并解决您确定的任何问题。 支持渐进式增强和优雅的降级 。 考虑到这一点，这是一个“理想的世界”情况，在生产环境中并不总是可以获得的，因此上述情况应该有助于提供一些很好的select。

归因/基本阅读

  • 基思·克拉克
  • 保罗爱尔兰人
  • networking虔诚
  • 扳手

那么你真的不必担心IE8代码不能在IE8中工作，因为IE8有兼容模式（它可以呈现与IE7相同的页面）。 但是如果你仍然想要定位不同版本的IE，现在已经做了一段时间的方法是使用条件注释或开始你的CSS规则与*目标IE7及以下 。 或者您可以关注服务器上的用户代理，并基于该信息提供不同的CSS文件。

实际的问题不是IE8，而是用于早期版本IE的黑客。

IE8是非常接近符合标准，所以你不应该需要任何黑客，可能只是一些调整。 问题是如果你使用一些黑客的IE6和IE7; 你将不得不确保他们只适用于那些版本而不是IE8。

前段时间我让我们公司的网站和IE8兼容。 我唯一改变的是添加meta标签，告诉IE浏览器页面符合IE8 …

我用Javascript做了它。 我添加三个CSS类到html元素： 

 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类，就像属性描述的一样。

（使用Mario的detectIE函数检查用户是否使用IE与jQuery ）

具有lte-ie8和lt-ie8等的好处就是它可以针对所有浏览器小于或等于IE9，即IE7-IE9。

Interesting Posts

带有classList的代码在IE中不起作用？

在IE中仿真/填充history.pushstate（）

如何安全地包装`console.log`？

IE：无法从*下载*。 无法打开此Internet站点。 请求的网站不可用或无法find

在IE中testingconsole.log语句

IE浏览器中的JavaScript Profiler

如何在IE8中使Google Maps半透明PNG图块层工作？

将自定义函数添加到Array.prototype中

强制IE8进入IE7兼容模式

当附加查询string参数或使用POST不是一个选项时，如何避免Internet Explorer 11中的AJAXcaching