如何使用有效的CSS定位IE7和IE8?
我想使用兼容W3C的CSS定位IE7和IE8。有时为一个版本修复CSS不能为另一版本修复。我该如何实现?
-
明确目标IE版本,无需使用HTML和CSS进行破解
如果您不希望CSS受到黑客攻击,请使用此方法。在
<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; }
带有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>