IE6支持!important嗎?怎樣用!important解決瀏覽器兼容性問題

!important是什么?
第一個,是設置樣式的優先級,設了!important的樣式的屬性優先于id選擇器和class選擇器 。,比如id為Main的div在它的Class設背景色為紅色 , ,id選擇器下又設了背景色為藍色 , 照css的就近原則,它的背景色應該是紅色了,因為id選擇器的優先級高于class選擇器,但是,一旦class里設了!important,哈哈,id,一邊去吧 。。我背景顏色要優先顯示class設置的啦,因為它有!important做后臺呀 。
第二個,可以利用它讓頁面效果在ff等瀏覽器上和ie6效果更相同 。因為不同的瀏覽器有自己默認的樣式,所以你設一個樣式在不同的瀏覽器里會有不同的效果 , 而有了!important,你就可以 。。。話說,這里先略過 , 偶也沒怎么用!important解決瀏覽器兼容性問題 。
就是說,它是解決瀏覽器兼容性問題的有效方法之一 。

IE6支持!important嗎?怎樣用!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
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title無標題文檔/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"簡明現代魔法 www.nowamagic.net/div
/body
/html
在查看其他人這方面的文章的時候,發現很多誤區,有人干脆就認為ie都是不支持!important這個屬性的,而有的人則又認為ie6是不支持這個屬性的,呵呵,其實ie6不是不支持,只是有個小bug,歡迎討論,指教,在不同的意見中提高技術 。
某些懂一些css的朋友大概會說,是ie6不支持!important,呵呵,這話說得有些對 , 但是不全對,為什么呢?
關鍵原因就是如果把樣式改一下:
復制代碼代碼如下:
style type="text/css"
#test {
color:red !important;/*IE7、FF、OP等顯示紅色文字*/
}
#test {
color:green;/*IE6顯示綠色文字*/
}
【IE6支持!important嗎?怎樣用!important解決瀏覽器兼容性問題】/style
你會發現在ie下字體的顏色變得和在FF中一樣了,而如果ie6真的不支持!important這個屬性的話,ie下字體的顏色就應該是綠色 , 而不是紅色,因為按照css的就近原則來說,字體的顏色一直都應該是綠色 , 而不是紅色的 。
但是 為什么我們把樣式改了之后,字體顏色在FF和ie6下就不一樣了呢,這應該是ie6下的一個bug,如果一個樣式內重復設了屬性,如color:*,它就會忽略掉!important了 。
呵呵,這樣樣式CSS1就有了,但一直沒有很好的發揮它的作用 , 但是其實,我們可以利用它來解決一些瀏覽器兼容性問題造成的異常,做到讓頁面盡量在不同瀏覽器之間看起來一樣 。
IE6對!important的支持是這樣的,單個的類是支持的,比如:
復制代碼代碼如下:
.className{color:#ffff00!important}
.className{color:green;}
這樣是支持的,但是:
復制代碼代碼如下:
.className{color:#ffff00; color:green}
這樣是不支持的 。


相關經驗推薦