注意CSS代碼中的!important屬性

原文來自http://www.enet.com.cn/article/2009/0104/A20090104411251.shtml

  CSS中的!important是一個非常重要的屬性,有時候發揮着非常大的作用,這方面的知識並不是非常多,我們看下面的文章,對它作比較感觀的瞭解。

  前幾天寫一些CSS代碼的時候又難爲我了,因爲那個該死的IE6對CSS的支持是如此的差勁,以前我還沒注意過,因爲做的東西基本都是基於IE的,可是我這次爲博客寫的CSS要支持不止IE一個瀏覽器,可恨的是我裝的Windows 7,這裏面自帶的是IE8瀏覽器,我自認爲已經沒有問題了,可是打開IE6,仍然出現錯位,於是我決定看看IE6到底是什麼情況。

  我把所有的CSS塊兒全部使用邊框包起來,結果看到在IE中兩個div之間的距離明顯要寬於其他瀏覽器,比如你寫一個div的margin屬性爲20px,那麼在IE中就好像是40px一樣,這也就是爲什麼本來精度計算的剛剛好,在IE下卻偏偏錯位的原因。

  後來我看到了!important這個屬性,這個屬性其實也是css規範中的,結果IE6愣是不支持,也正因爲它不支持,才讓很多的CSSer們找到了解決的方法。一般來講,在css中,如果在同一個css塊中寫下兩個同樣的屬性,那麼其實是按照最下面的來執行的,比如說:

.home{
margin-left:20px;
margin-left:40px;
}

  那麼在執行的時候其實是按照40px來執行的,!important的出現就是爲了讓用戶自己設置被執行語句的優先級。如果把上面的語句改爲:

.home{
margin-left:20px!important;
margin-left:40px;
}

  那麼在火狐、google瀏覽器以及IE7以上版本下將會按照20px來執行,而在IE6下卻仍然按照40px來執行,因爲IE6並不支持!important規範,我們就可以按照這個規則來滿足IE6的設計需要,什麼時候發現IE6和其他瀏覽器顯示效果不同,那麼就設置兩個,在上面的一個加入!important標記,而下面的一句則不需要添加,這樣IE6就按照下面的來執行了。資深的CSSer說:如今的CSS處處!important。這可都是天殺的IE6惹的禍,大家說IE6就是一坨代謝產物一點也不爲過。

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