CSS對瀏覽器器的兼（jiān）容（róng）性具（jù）有很高的價值（zhí），通常情況下IE和Firefox存（cún）在很（hěn）大的解析差異，這裏（lǐ）介紹一下（xià）兼容要點。

常見兼（jiān）容（róng）問題：

1、DOCTYPE 影響 CSS 處理

2、FF：div 設置 margin-left， margin-right 為 auto 時已經居中（zhōng），IE 不（bú）行

3、FF: body 設置 text-align 時， div 需要設置 margin: auto(主（zhǔ）要（yào）是 margin-left，margin-right) 方可居中

4、FF: 設置 padding 後， div 會增加 height 和 width， 但 IE 不會， 故需（xū）要用 !important 多設一（yī）個 height 和（hé） width

5、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設置樣式

6、div 的垂（chuí）直居中（zhōng）問題: vertical-align:middle; 將行距增加到和整個DIV一樣高（gāo） line-height:200px; 然（rán）後（hòu）插入文字，就垂直居中了。缺點是要控製內容不要換行

7、cursor: pointer 可以同時在 IE FF 中顯示（shì）遊（yóu）標手指（zhǐ）狀， hand 僅（jǐn） IE 可以（yǐ）

8、FF: 鏈接加邊框和背（bèi）景色，需設置 display: block， 同時設置 float: left 保證（zhèng）不換行。參照 menubar， 給 a 和 menubar 設置高度是為了避免底邊顯（xiǎn）示（shì）錯位， 若（ruò）不設（shè） height， 可以在 menubar 中插入一個空（kōng）格。

9、在mozilla firefox和IE中（zhōng）的BOX模型解釋不一致導致（zhì）相差2px解（jiě）決方法：

div{margin:30px!important;margin:28px;}

注意這兩（liǎng）個margin的順序一定（dìng）不能（néng）寫（xiě）反，據阿捷的說（shuō）法!important這個屬性IE不能識別，但別的瀏覽器可以識（shí）別（bié）。所以在IE下其（qí）實解（jiě）釋成這樣：

div{maring:30px;margin:28px}

重複定義（yì）的話（huà）按照最後一個（gè）來執行，所以（yǐ）不可以（yǐ）隻寫margin:XXpx!important;

10、IE5 和IE6的BOX解釋不一（yī）致

IE5下

div{width:300px;margin:0 10px 0 10px;}

div的寬度會被解釋為300px-10px(右填（tián）充)-10px(左（zuǒ）填充)最終div的寬度為280px，而在IE6和其他瀏覽（lǎn）器上（shàng）寬度則是以300px+10px(右（yòu）填充)+10px(左（zuǒ）填充（chōng）)=320px來計算的。這時我們可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

關於這個/**/是什麽我也不太明白，隻知道IE5和firefox都支持但IE6不支持。

11、ul標簽（qiān）在Mozilla中（zhōng）默（mò）認是有padding值的，而在IE中（zhōng）隻有margin有值所以先定義

ul{margin:0;padding:0;}

就能解決（jué）大部分問（wèn）題

注意事項（xiàng）：

1、float的div一定要閉合。

例如：(其中floatA、floatB的屬性（xìng）已經設置為float:left;)

<#div id="floatA" ></#div>

<#div id="floatB" ></#div>

<#div id="NOTfloatC" ></#div>

這裏的NOTfloatC並不希望繼續平（píng）移，而是希望往下（xià）排。

這（zhè）段代碼在IE中毫無問題，問題出在FF。原因是（shì）NOTfloatC並非float標（biāo）簽，必須將float標簽閉合（hé）。

在（zài）

<#div class="floatB"></#div>

<#div class="NOTfloatC"></#div>

之間加上

<#div class="clear"></#div>

這個div一定要（yào）注意聲（shēng）明位（wèi）置，一定要放在最恰（qià）當的地方，而且必（bì）須與兩個具有float屬性的div同級（jí），之間不能（néng）存在（zài）嵌（qiàn）套（tào）關係，否（fǒu）則會（huì）產生異常。

並且將clear這種樣式（shì）定義為為如下即可（kě）：

.clear{

clear:both;}

此外，為了讓（ràng）高度能自動適應，要（yào）在wrapper裏麵（miàn）加上overflow:hidden;

當包含（hán）float的（de）box的時候，高度自（zì）動適應（yīng）在IE下無效，這時候應該觸發IE的（de）layout私有屬（shǔ）性(萬惡的IE啊！)用（yòng）zoom:1;可以（yǐ）做到，這（zhè）樣就（jiù）達到了（le）兼容。

例如（rú）某一個wrapper如下定（dìng）義（yì）：

以（yǐ）下為（wéi）引用的內容： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

2、margin加倍的問題。

設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。

解（jiě）決方案

是在（zài）這（zhè）個div裏（lǐ）麵加上display:inline;

例（lì）如：

<#div id="imfloat"></#div>

相應的（de）css為

以下為引（yǐn）用的內容： #IamFloat{ float:left; margin:5px;/*IE下（xià）理解為（wéi）10px*/ display:inline;/*IE下（xià）再（zài）理解為5px*/}

3、關於容器（qì）的包涵關係

很多時（shí）候，尤（yóu）其是容器內有平行布局，例如兩、三（sān）個float的div時，寬度很容易出（chū）現問（wèn）題。在IE中，外層的寬度會（huì）被內層（céng）更寬的div擠破。一（yī）定要用Photoshop或者Firework量取像（xiàng）素級的（de）精度。

4、關於高度的問題

如果是動態地（dì）添加內（nèi）容，高（gāo）度（dù）最好不要定（dìng）義。瀏覽器可以自（zì）動伸縮，然而如果是靜態的內（nèi）容（róng），高度最好定好。（似乎有時（shí）候不會自動往下撐開，不知道具體（tǐ）怎麽回事）

5、最狠（hěn）的手段（duàn） - !important;

如果實在沒有辦法解（jiě）決一些細節問題，可以用這個方法（fǎ）.FF對於"!important"會自動（dòng）優先（xiān）解析，然而IE則會（huì）忽略。如下

以下為引用的內容： .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

值得注意的是，一定要將xxxx !important 這句（jù）放置在另一句之上，上麵（miàn）已經提過 undefined undefined