瀏覽器css相容性,我的解決方案,不用!important

最近很多朋友都問我瀏覽器的相容性問題，我一時也不知道從哪裡說起。自己寫得出，但不一定說得出。百度一下就搜到一個相容大全，基本上算是寫兩種樣式來相容。見得最多的是!important。很多朋友的代碼動輒就上千行那麼長了。
我很納悶，我寫的css代碼幾乎不用!important，而且我寫CSS追求一個字“簡”，通常一個站的css寫下來都沒過500行。但是My Code也同樣相容IE6，7、Firefox、Opera。

我寫CSS的風格多半是多參考國外的寫法而來的，國外的大多也是很少會見到!mportant的寫法，而且代碼規化很合理，代碼相當簡潔，能重用的樣式絕不多定義一個class來表達。還有就是國外大數好的網站所用單位是em。
話說回來，到底哪種寫法好倒是沒什麼定論，我今天博這篇文章只是說說我個人寫css的經驗，好了，不費話，上方法：

1、ie6下面，div的height會因為嵌套在div裡面的div撐開，而ie7和Firefox則不會，所以在寫嵌套較多的div時，本人不建議用height屬性，建議用加上overflow:hidden;將div的高度自動撐開。

2、雖說各瀏覽器margin和padding的象素理解是不一樣的，不過height的理解一樣，在嵌套較小的情況，比如網頁的版頭，我一般會用height來定義版頭div的高度，然後給版頭加一個背景。有背景圖片的話，height屬性一般不跟margin和padding一起用，因為各瀏覽器margin和padding的象素理解是不一樣。舉個例子，我們給版頭定義了一個{height:50px;padding:10px;}然後放一個背景圖片，背景圖片的高度為70px;某些瀏覽器一重新整理就會發現顯示不全，或者是下部會多一塊白。我們把樣式定成{height:70px;}然後加背景，如此各瀏覽器顯示就相同了。

3、有些朋友在一個網頁裡面會定義很多次字型、行高、字型大小等，其實很多情況下，那些字型定義都是無用的。比如下面的代碼就是重複定義：
BODY {
  FONT-SIZE: 12px; MARGIN: 0px; COLOR: #16387c; FONT-FAMILY: Arial
}
TD {
  FONT-SIZE: 12px; MARGIN: 0px; COLOR: #16387c; FONT-FAMILY: Arial
}
TH {
  FONT-SIZE: 12px; MARGIN: 0px; COLOR: #16387c; FONT-FAMILY: Arial
}
在body裡面定義了FONT-SIZE: 12px; COLOR: #16387c; FONT-FAMILY: Arial樣式，而整個頁網所有的字型都會預設是這個樣式了，沒必要再在td、th裡面再定義一次，雖然顯示也沒問題，不過代碼不簡潔。
我個人比較偏向於國外的簡潔風格，我做的頁面所用字型字型大小一般不會超過兩種，通常就是只在body裡面定義一個FONT-FAMILY和line-height，然後其它地方就很少出現這兩個樣式，這樣也保持了頁面風格的統一。

4、記住加單位，在ie6下面，margin和padding是可以不用加單位也能顯示的，如padding:10;但是這不符合w3c標準，在Firefox下面就會出顯示不出，我們得把樣式寫成如下，padding:10px;margin:10px;

5、寫css前做好規化，很多樣式相差不多的，如左側欄右側欄裡面的面板，它們的class是一樣的，我們就沒必要每個面板定義一次樣式了。又比如紅色提示字型和clearboth在頁面出現率較高的樣式我們給他們單獨定義。

6、寫繼承，很多人寫css是全是父類，
如.contain{} .tit{} .contents{}
這樣寫顯示也正常，不過樣式多時，要尋找就有些困難。我以前做資訊網時，頁面樣式相當多，而我當時就是那種全父類的寫法，也不知道什麼原因，某些樣式不識別了，特別是在ie6下面還會出現斷開的樣子。
因此我建議寫成.contain{} .contain .tit{} .contain .contents{}

7、精簡代碼，在css下面有幾種可以精簡的。
如下邊框代碼
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
  
可以簡寫成：border:dotted 1px #fff;
或者：
border-top:dotted 1px #fff;
border-left:dotted 1px #fff;
border-right:dotted 1px #fff;
border-bottom:dotted 1px #fff;

下面邊距代碼
margin-top:10px;
margin-left:40px;
margin-right:20px;
margin-bottom:30px;
可以簡寫成：margin:10px 20px 30px 40px;

同理
padding-top:10px;
padding-left:40px;
padding-right:20px;
padding-bottom:30px;
可以簡寫成：padding:10px 20px 30px 40px;

下面背景代碼
background-repeat: no-repeat;
background-color: #fff;
background-image: url(../images/bg.jpg);
background-position: left top;
可以簡寫成：background:#fff url(../images/bg.jpg) no-repeat left top;

其實要寫出相容又快速又規範的代碼，還有一個很快速的方法，那就是用Dreamweaver自動產生的css模板。
開啟Dreamweaver CS3，點擊檔案->建立，直接看右側的布局卡中，上面有很多種布局方式的頁面供我們選擇，還等什麼，直接選一個吧。
點擊確認後看看CSS代碼，注釋寫得超詳細，而且相容各大瀏覽器，裡面也沒有見有用到!important的。(哇噻！DW太人性化了，愛死你了。)

----------------華麗的分割線------------------------------

多上w3c網站研究研究，收穫會比百度google搜出來的東西更大。代碼規範說再多隻是說，最重要的是多實踐，經驗最重要，有很多很多的問題是在實踐中碰到的。呵呵，就說這麼多，這篇文章我寫的是My Code風格，有什麼不對歡迎大家來指出。