你對CSS中使用!important解決IE6 IE7 Firefox兼容性問題的方法是否了解，這里和大家分享一下，首先我們看一下盒模型的概念。

CSS中使用!important解決IE6 IE7 Firefox兼容性問題

◆首先談談!important問題的引起（盒模型問題）:

在CSS標準中，一個盒模型包括4個區(qū)，分別是：內容、內邊距（padding）、邊框（border）和外邊距（margin）。而Width寬度的計算，CSS有它的標準。但是實際上，不同的瀏覽器的表現卻不同。比如，
Firefox（FF）是準確按照CSS標準：width為內容的寬度，也就是說：
層的寬度=width+padding(leftandright)+border-width；

而IE則把width作為整個層的寬度：
內容的寬度=width-padding-border-width；

IE的這種解析，被認為是一個BUG。但事實上，這種解釋也不無道理，人們在設計頁面的時候關注得更多的是盒子的大小，而不是內容的大小。正是因為瀏覽器的不同解析，給CSS的設計帶來一些困難。

◆針對這個問題，我們經常使用!important來區(qū)分Firefox和IE6.0：

以下為引用的內容： 

#content  
{  
　　width:414px!important;  
　　width:400px;  
　　padding:5px;/*只給出一個值，表示上右下左的邊距都為5px*/  
　　border-width:2px;  
}  

 Firefox識別!important，而IE不識別，且!important的width優(yōu)先級高，因此FF理解為width:400px，IE6.0理解為width:414px，從而顯示就相同了。

　　但是問題出在IE7，IE7.0對!important有了識別能力，但是對盒模型的解析卻和IE6.0等一樣，從而造成很大的麻煩。也就是說，!important的方法在IE7.0下變得不適用了。
　　而一般的情況下，border的使用相對較少的，并且border-width一般較小，因此最主要的問題就出在padding上了。網上很多人總結的經驗是：padding要盡量少用，能用margin的，就別用padding。這種說法是消極的，問題的解決不應該總是回避。

◆盒模型問題的解決：

仔細想想，其實問題就出在“width與padding/border-width的同時定義”上。而明白了這一點，解決的方法就不難想到了，只要添加一個無width定義的wrapper層，把原來的一個content層拆分成2個層，在wrapper中定義padding和border-width，然后在content中定義width：

以下為引用的內容： 

#wrapper{padding:5px;border-width:2px;}  
 
#content{margin:0px;width:400px;}  
 

 以下為引用的內容： 

<dividdivid="wrapper"> 
　　<dividdivid="content"> 
　　　　...  
　　</div> 
</div> 
 

這樣問題就可以得到解決，FF，IE6.0以及IE7.0都會獲得相同的顯示效果。更重要的是，沒有使用任何CSShack。

這種解決方法可以說是最終的方案，使用CSShack的方法只是目前過渡階段的臨時方法。
對于網站構造，特別是對于樣式比較復雜的網站，個人建議在重要的層快外加上wrapper層。但是對于目前現成的模板，可以有選擇修改部分樣式，或者使用其他方法。

◆是否適合所有的瀏覽器？

理論上，這種方法應該適用于各種瀏覽器。
但是本人認為除非大型網站，兼容FF，IE6.0，IE7.0已經足夠，這里也是主要針對這三個最主流的瀏覽器，IE更低版本，以及其他瀏覽器上的可行性有待驗證。
 

【編輯推薦】

1. 主流瀏覽器CSS Reset的方法
2. DIV層在IE6下被下拉框遮擋的解決方法
3. JavaScript巧解IE6至IE8兼容問題
4. 深入探究IE8和IE7的24個區(qū)別
5. CSS中輕松實現Firefox與IE透明度