IE6是支持!important的

由于本人最近沉迷于iPhone不能自拔,所以很久没有更新博客了。转入正题:

网上很多讲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是全浏览器兼容的。

发表评论