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

　　先看下面的效果：

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

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

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

　　先看看CSS中對于中間區域的定義：

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

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

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

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

　　再看CSS定義：

　瀏覽下效果，正常了！

　　　　

調整前的效果　　　　　　　　　用width: !important后的效果

　　查看Firefox的Iavascript控制臺，可看到以下一些提示，說明用CSS中用 !important提升指定樣式規則的應用優先權后，Opera和Firefox中會優先執行并丟棄后面相同的定義：