且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-05 11:06:28

Explicitly Target IE versions without hacks using HTML and CSS

如果您不想在 CSS 中进行黑客攻击,请使用此方法.向 <html> 元素添加浏览器唯一的类,以便您以后可以根据浏览器进行选择.

Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <html> element so you can select based on browser later.

示例

<!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 中,您可以非常严格地访问您的目标浏览器.

Then in your CSS you can very strictly access your target browser.

示例

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

有关更多信息,请查看 http://html5boilerplate.com/

For more information check out http://html5boilerplate.com/

使用 CSSHacks"定位 IE 版本

更重要的是,这里有一些可让您定位 IE 版本的技巧.

More to your point, here are the hacks that let you target IE versions.

使用9"来定位 IE8 及以下.
使用*"来定位 IE7 及以下.
使用_"定位到 IE6.

Use "9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.

示例:

body { 
border:1px solid red; /* standard */
border:1px solid blue9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

更新:面向 IE10

IE10 无法识别条件语句,因此您可以使用它来将ie10"类应用到 元素

IE10 does not recognize the conditional statements so you can use this to apply an "ie10" class to the <html> element

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>