跨瀏覽器邊框探索

雖然起了一個看似很屌的題目，但本文可以說完全是蛋痛的人（比如我~）的一種消遣~通常開發人員都有自己的放鬆方式。緣起壇裡某位xd問的一個關於邊框的問題，於是就打算搞清楚。寫文章用不了太久，倒是圖材準備了老半天。謹以此文，讓我們來消遣下各個瀏覽器對於邊框的理解方式。

參與測試的瀏覽器包括windows下的幾乎全部：ie6，ie7，ie8，ie9preview，chrome，firefox，safari，opera，seamonkey。各版本皆為網路下載的最新版。而由於這次的測試裡，IE678的表現一致，firefox和seamonkey又是裙帶，所以合併作IE8和firefox。下圖就是這次瀏覽器的截圖：

上面的這種排列順序是故意的。下面的測試裡就會顯示出原因，截圖也都是依照這個順序排列的。

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

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

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