CSS定義對(duì)于不同瀏覽器的兼容性問題一直比較困惑。不管是用div+CSS還是table來進(jìn)行頁面設(shè)計(jì)，我對(duì)WEB重建的理解是：速度與兼容性。即要盡可能提高瀏覽者訪問頁面時(shí)瀏覽的速度、要使頁面能盡可能兼容不同來訪瀏覽器的瀏覽效果。所以近期的設(shè)計(jì)都是打開幾個(gè)不同的瀏覽器進(jìn)行測(cè)試，如IE、GoSuRF Browser、Opera和Firefox瀏覽器。測(cè)試結(jié)果表明，IE和GoSuRF Browser對(duì)CSS的支持最好，Opera其次，F(xiàn)irefox要求最高。

　　先看下面的效果：

　　以下圖片是在IE瀏覽器、GoSuRF Browser瀏覽器和Opera瀏覽器中看到的效果：

　　在Mozilla Firefox瀏覽器中看到的效果：

　　其中在IE和GoSuRF Browser瀏覽器瀏覽時(shí)的效果基本沒差別，居中正常；Opera瀏覽器中對(duì)于這里居中效果也正常（但對(duì)于頁面其他地方就有些問題，這在后面再研究）；在Mozilla Firefox瀏覽器中看到的效果就不同了，居中是對(duì)的，但是二邊都沒對(duì)齊，抓圖仔細(xì)查看了下，二邊多出了5個(gè)像素的寬度，并且里面的縮進(jìn)量都有問題。

　　先看看CSS中對(duì)于中間區(qū)域的定義：

#mainall { width: 760px; height: 300px; padding: 5px; margin: 0 auto; background: #fff; }

　　可能是padding: 5px;這個(gè)縮進(jìn)量Firefox不支持，先測(cè)試將“padding: 5px;”改成“padding: 0px;”，保存后瀏覽，二邊多出了5個(gè)像素的寬度就不見了。就是它了。在CSS中再加一句：“padding: 0px !important; ”：

#mainall { width: 760px; height: 300px; padding: 0px !important; padding: 5px; margin: 0 auto; background: #fff; }

　　!important的作用是提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)，但I(xiàn)E不支持的值，CSS中即使定義了IE也會(huì)忽略這它而選擇按后面的定義執(zhí)行并顯示，而Opera和Firefox卻會(huì)按!important指出的規(guī)則優(yōu)先顯示?？聪聻g覽效果：

　　首先二邊對(duì)齊的問題解決了。但是右側(cè)的div內(nèi)容卻被擠到下面去了。很可能是寬度不夠的緣故。再看下左右二個(gè)div的定義：

/*===中部左側(cè)定義開始===*/ #mainbox { padding:10px; float: left; width: 495px; background: #fff; } /*===中部右側(cè)定義開始===*/ #rightbox { float: right; padding: 5px; width: 250px; height: 100%; background: #F6F7F9; }

　　應(yīng)該是這個(gè)狐貍（Firefox）將padding這個(gè)補(bǔ)丁邊距的縮進(jìn)量，不但是只具有縮進(jìn)效果，并且還讓瀏覽器解析成：整個(gè)box的寬度為width＋padding了！暈哦，找到這個(gè)原因，解決起來方便些了：將整個(gè)box的寬度在Firefox中應(yīng)該計(jì)算為（width－padding）。讓!important來做這個(gè)工作吧：

/*===中部左側(cè)定義開始===*/ #mainbox { padding: 0px !important;　/****兼容Firefox瀏覽器*****/ padding:10px; float: left; width: 495px; background: #fff; } /*===中部右側(cè)定義開始===*/ #rightbox { float: right; padding: 5px; width: 250px; height: 100%; background: #F6F7F9; }

　　再次瀏覽，終于左側(cè)上去了，哈哈，應(yīng)該就是這個(gè)問題啦。但是問題又來了，右側(cè)怎么灰色的標(biāo)題欄到邊界外面去了？

　　再看CSS定義：

#rightbox dt { padding: 3px !important;　/****兼容Firefox瀏覽器*****/ padding: 3px; margin: 0px; border: 0px; width: 100%; font-weight: normal; font-family:宋體; font-size: 12px; color: #fff; background: #A6A9AE; text-align: left; } #rightbox dd { padding: 5px !important;　/****兼容Firefox瀏覽器*****/ padding: 10px; margin: 0px; border: 0px; text-align: left; width: 100%; font-weight: normal; font-family:宋體; font-size: 12px; line-height: 24px; }

　　
　　這里設(shè)置了標(biāo)題#rightbox dt的寬度為100%，測(cè)試一下，去掉這個(gè)定義就顯示正常了，用相同的手法處理下，加上個(gè)定義“width: !important;”，讓Firefox先認(rèn)識(shí)這個(gè)定義而丟棄width: 100%的定義即可：

#rightbox dt { padding: 3px !important;　/****兼容Firefox瀏覽器*****/ padding: 3px; margin: 0px; border: 0px; width: !important;　/****兼容Firefox瀏覽器*****/ width: 100%; font-weight: normal; font-family:宋體; font-size: 12px; color: #fff; background: #A6A9AE; text-align: left; } #rightbox dd { padding: 5px !important;　/****兼容Firefox瀏覽器*****/ padding: 10px; margin: 0px; border: 0px; text-align: left; width: !important;　/****兼容Firefox瀏覽器*****/ width: 100%; font-weight: normal; font-family:宋體; font-size: 12px; line-height: 24px; }

　瀏覽下效果，正常了！

　　　　

調(diào)整前的效果　　　　　　　　　用width: !important后的效果

　　查看Firefox的Iavascript控制臺(tái)，可看到以下一些提示，說明用CSS中用 !important提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)后，Opera和Firefox中會(huì)優(yōu)先執(zhí)行并丟棄后面相同的定義：

Firefox的Iavascript控制臺(tái)提示信息： 錯(cuò)誤： 預(yù)期為 ’:’ 但卻得到 ’padding’。 聲明被丟棄。 源文件：　　行：71 …… 錯(cuò)誤： 預(yù)期為 ’:’ 但卻得到 ’width’。 聲明被丟棄。 源文件：　行：212