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

　　先看下面的效果：

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

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

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

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

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

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

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

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

　　再看CSS定義：

　瀏覽下效果，正常了！

　　　　

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

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