雖然起了一個看似 的題目，但本文可以說完全是 的人（比如我~）的一種消遣~通常開發(fā)人員都有自己的放松方式，

各種瀏覽器對于網(wǎng)頁布局邊框的理解方式...

。緣起壇里某位xd問的一個關(guān)于邊框的問題，于是就打算搞搞清楚。寫文章用不了太久，倒是圖材準備了老半天。謹以此文，讓我們來消遣下各個瀏覽器對于邊框的理解方式。

    參與此次測試的瀏覽器包括windows下的幾乎全部：ie6，ie7，ie8，ie9preview，chrome，firefox，safari，opera，seamonkey。各版本皆為網(wǎng)上下載的最新版。并且由于這次的測試里，IE678的表現(xiàn)一致，firefox和seamonkey又是裙帶，所以合并作IE8和firefox。下圖就是這次瀏覽器的截圖：

   

    上面的這種排列順序是故意的，

電腦資料

《各種瀏覽器對于網(wǎng)頁布局邊框的理解方式...》(http://www.ishadingyu.com)。下面的測試里就會顯示出其原因，截圖也都是按照這個順序排列的。

    首先看下面這張圖，六種瀏覽器里顯示了一個20X20的DIV，其邊框為top:2px，其余1px。似乎沒有什么不同。這是由于1px的細微讓我們沒有在意。(事實上這整個問題我們本來就不需要在意~)

   

    先把問題簡單化，單邊2px，三邊1px，并將結(jié)果放大5倍，我們能清楚的看到這種差異——opera和safari相反，ie8缺胳膊少腿，下面三個家伙一致~這里要注意到的是第二行3者在交匯處都有漸進效果。

   

    也許我們該讓這種效果變得更加明顯。當僅僅加粗單邊之后(10px)，IE8的怪癖顯露無疑。opera和safari依舊相對。下面3個統(tǒng)一戰(zhàn)線的漸進變的更加明顯。