辯駁一個默認的說法:IE6不支持!important (轉http://www.cnblogs.com/lanyueer/archive/2011/03/29/1998398.html)

一:"!important"是什麼?

  第一個,是設置樣式的優先級,設了!important的樣式的屬性優先於id選擇器和class選擇器。,比如id爲"Main"的div在它的Class設背景色爲紅色,,id選擇器下又設了背景色爲藍色,照css的"就近原則",

它的背景色應該是紅色了,因爲id選擇器的優先級高於class選擇器,但是,一旦class裏設了"!important",哈哈,id,一邊去吧。。我背景顏色要優先顯示class設置的啦,因爲它有!important做後臺呀。。

 第二個,可以利用它讓頁面效果在ff等瀏覽器上和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">我是即日旮旯</div>


</body>
</html>

聲明哈。。。。div裏面的文字沒有諷刺吉日的說,,偶是很喜歡吉日的商業精神的,他是偶學習和敬佩的人之一,雖然園子裏有些朋友說吉日老師推薦自己的軟件,但是我覺得他的商業精神是很值得學習的。。

在查看其他人這方面的文章的時候,發現很多誤區,有人乾脆就認爲"ie都是不支持!important"這個屬性的,而有的人則又認爲"ie6是不支持這個屬性的",呵呵,其實"ie6不是不支持,只是有個小bug",歡迎討論,指教,在不同的意見中提高技術。

這個在FF顯示器下的效果:

 

這個是在IE6下的效果:

  

  呵呵,爲什麼同樣的代碼,在不同的瀏覽器下的顯示效果卻會有這麼大的差別呢?

  某些懂一些css的朋友大概會說,是ie6不支持"!important",呵呵,這話說得有些對,但是不全對,爲什麼呢?

  關鍵原因就是如果把樣式改一下,

<style type="text/css">
#test {
    color:red !important;/*IE7、FF、OP等顯示紅色文字*/
    /
}
#test {
   color:green;/*IE6顯示綠色文字*/
}
  
  
</style>

 

你會發現在ie下字體的顏色變得和在FF中一樣了,而如果ie6真的不支持"!important"這個屬性的話,ie下字體的顏色就應該是綠色,而不是紅色,因爲按照css的“就近原則”來說,字體的顏色一直都應該是綠色,而不是紅色的。

但是 爲什麼我們把樣式改了之後,字體顏色在FF和ie6下就不一樣了呢,這應該是ie6下的一個bug,如果一個樣式內重複設了屬性,如"color:*",它就會忽略掉"!important"了。

  呵呵,這樣樣式CSS1就有了,但一直沒有很好的發揮它的作用,但是其實,我們可以利用它來解決一些瀏覽器兼容性問題造成的異常,做到讓頁面儘量在不同瀏覽器之間看起來一樣。

小結,回覆蘭月兒博文的一位朋友對ie6對"!important"屬性總結的很明白,偶截了圖貼一下:

發佈了153 篇原創文章 · 獲贊 5 · 訪問量 44萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章