IE6支持!important嗎如何用!important解決瀏覽器兼容性問題

發(fā)布時(shí)間：2012-12-10 10:07:18 作者：佚名

第一個(gè)，是設(shè)置樣式的優(yōu)先級，設(shè)了!important的樣式的屬性優(yōu)先于id選擇器和class選擇器;第二個(gè)，可以利用它讓頁面效果在ff等瀏覽器上和ie6效果更相同

"!important"是什么？
第一個(gè)，是設(shè)置樣式的優(yōu)先級，設(shè)了!important的樣式的屬性優(yōu)先于id選擇器和class選擇器。，比如id為"Main"的div在它的Class設(shè)背景色為紅色，，id選擇器下又設(shè)了背景色為藍(lán)色，照css的"就近原則"，它的背景色應(yīng)該是紅色了，因?yàn)閕d選擇器的優(yōu)先級高于class選擇器，但是，一旦class里設(shè)了"!important",哈哈，id，一邊去吧。。我背景顏色要優(yōu)先顯示class設(shè)置的啦，因?yàn)樗?important做后臺呀。

第二個(gè)，可以利用它讓頁面效果在ff等瀏覽器上和ie6效果更相同。因?yàn)椴煌臑g覽器有自己默認(rèn)的樣式，所以你設(shè)一個(gè)樣式在不同的瀏覽器里會有不同的效果，而有了!important，你就可以。。。話說，這里先略過，偶也沒怎么用!important解決瀏覽器兼容性問題。

就是說，它是解決瀏覽器兼容性問題的有效方法之一。
先把代碼貼出來：

復(fù)制代碼

代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
#test {
color:red !important;/*IE7、FF、OP等顯示紅色文字*/
color:green;/*IE6顯示綠色文字*/
}
span {color:gray !important;}
span {
color:gray !important;/*IE6將不會將文本顯示為灰色(gray)*/
color:red;
}
</style>
</head>
<body>
<div id="test">簡明現(xiàn)代魔法 www.nowamagic.net</div>
</body>
</html>

在查看其他人這方面的文章的時(shí)候，發(fā)現(xiàn)很多誤區(qū)，有人干脆就認(rèn)為"ie都是不支持!important"這個(gè)屬性的，而有的人則又認(rèn)為"ie6是不支持這個(gè)屬性的"，呵呵，其實(shí)"ie6不是不支持，只是有個(gè)小bug",歡迎討論，指教，在不同的意見中提高技術(shù)。

某些懂一些css的朋友大概會說，是ie6不支持"!important"，呵呵，這話說得有些對，但是不全對，為什么呢？
關(guān)鍵原因就是如果把樣式改一下：

復(fù)制代碼

代碼如下:

你會發(fā)現(xiàn)在ie下字體的顏色變得和在FF中一樣了，而如果ie6真的不支持"!important"這個(gè)屬性的話，ie下字體的顏色就應(yīng)該是綠色，而不是紅色，因?yàn)榘凑誧ss的"就近原則"來說，字體的顏色一直都應(yīng)該是綠色，而不是紅色的。

但是為什么我們把樣式改了之后，字體顏色在FF和ie6下就不一樣了呢，這應(yīng)該是ie6下的一個(gè)bug，如果一個(gè)樣式內(nèi)重復(fù)設(shè)了屬性,如"color:*"，它就會忽略掉"!important"了。
呵呵，這樣樣式CSS1就有了，但一直沒有很好的發(fā)揮它的作用，但是其實(shí)，我們可以利用它來解決一些瀏覽器兼容性問題造成的異常，做到讓頁面盡量在不同瀏覽器之間看起來一樣。
IE6對!important的支持是這樣的，單個(gè)的類是支持的，比如：

復(fù)制代碼

代碼如下:

.className{color:#ffff00!important}
.className{color:green;}

這樣是支持的，但是：

復(fù)制代碼

代碼如下:

.className{color:#ffff00; color:green}

這樣是不支持的。