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

一尘不染

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

css

我想使用兼容W3C的CSS定位IE7和IE8。有时为一个版本修复CSS不能为另一版本修复。我该如何实现？

阅读 314

2020-05-16

共1个答案

一尘不染

明确目标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>

2020-05-16