如何使用有效的 CSS 定位 IE7 和 IE8? [英] How does one target IE7 and IE8 with valid CSS?

查看:34
本文介绍了如何使用有效的 CSS 定位 IE7 和 IE8?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用符合 W3C 的 CSS 来定位 IE7 和 IE8.有时,为一个版本修复 CSS 并不能为另一个版本修复.我怎样才能做到这一点?

I want to target IE7 and IE8 with W3C-compliant CSS. Sometimes fixing CSS for one version does not fix for the other. How can I achieve this?

推荐答案

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>

这篇关于如何使用有效的 CSS 定位 IE7 和 IE8?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆