您的位置：首页 > 其它

IE6是支持!important的

2012-05-24 16:26 423 查看

备注：写在同一选择器中的!important是不被IE6所认的，而分开情况的则正常

参考：http://blog.dmtuan.com/?p=183

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>IE6支持important</title>

<style type="text/css">

.box { background:red;}

.box { background:green !important; }

.box-box { background:green !important; background:red;}

</style>

</head>

<body>

<div class="box">IE6支持important</div><!--所有浏览器都是green-->

<div class="box-box">IE6支持importantt</div><!--IE6浏览器是红色--->

</body>

</html>

IE6是支持!important的

转自：http://bbs.blueidea.com/thread-2982362-1-1.html

首先，这个题目有点老了。为什么要写这个，是因为我在一个群里讨论CSS规则优先级的时候，说了句!important级别最高。因果被批判的体无完肤，什么“!important不好用，谁没事会用它”，“IE6根本不支持这个东西”之类的话。我想说IE6真的是支持!important的。

网上很多讲CSS HACK的教程都有这样的内容，如果想写一个让FF、IE7、IE8可以识别，并且IE6不能识别的CSS HACK，就用!important。造成的结果就是很多人以为!important在IE6下根本不支持，本人当时就是受害者之一。!important在CSS1中就有描述，链接如下：http://www.w3.org/TR/CSS1/#important。为什么会造成IE6不支持的假象呢，原因是IE6有BUG。在IE6中，下面的这段代码显示是不正确的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red !important;
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：您可以先修改部分代码再运行

在标准浏览器下，这个DIV应该是红色的，但在IE6下是黄色的。这个只能说是IE6的BUG，而不能说IE6完全不支持!important。如果把上面的代码改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red !important;
}
div {
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
提示：您可以先修改部分代码再运行

怎么样，可以正常显示了吧。同理，下面的代码在IE6下也可以正确显示的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red !important;
}
#div1 {
background: yellow;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
提示：您可以先修改部分代码再运行

结论：作为CSS优先级别的老大，!important是全浏览器兼容的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航