如何使用有效的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,它增加了ie7lte-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。