CSS定義對(duì)于不同瀏覽器的兼容性問題一直比較困惑。不管是用div+CSS還是table來(lái)進(jìn)行頁(yè)面設(shè)計(jì)，我對(duì)WEB重建的理解是：速度與兼容性。即要盡可能提高瀏覽者訪問頁(yè)面時(shí)瀏覽的速度、要使頁(yè)面能盡可能兼容不同來(lái)訪瀏覽器的瀏覽效果。所以近期的設(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ì)于頁(yè)面其他地方就有些問題，這在后面再研究）；在Mozilla Firefox瀏覽器中看到的效果就不同了，居中是對(duì)的，但是二邊都沒對(duì)齊，抓圖仔細(xì)查看了下，二邊多出了5個(gè)像素的寬度，并且里面的縮進(jìn)量都有問題。

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

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

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

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

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

　　再看CSS定義：

　瀏覽下效果，正常了！

　　　　

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

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