border邊框在瀏覽器中的渲染方式

針對border邊框屬性在瀏覽器中的渲染方式很早以前就開始在QQ群中看到大家在討論，而我也一直以border:0 none;的方式處理。其中當然也是有我自己為什麼要做的原因，對於這個原因在下面的分析中將會提到。在對border邊框屬性進行分析之前，需要說明的幾點內容是：

1. 小志我並不是分析專家，只是藉助Firebug和IE developer這兩個工具在FF瀏覽器和IE瀏覽器中查看瀏覽器的渲染結果；
2. 因為只是查看了FF瀏覽器和IE瀏覽器的渲染結果，並不能代表所有的瀏覽器都是相同的方式進行渲染。

為了能更好的對邊框的樣式進行對比，這裡我們選用的是「按鈕」元素，但使用的標籤卻是不同的，它們分別是input標籤元素和button標籤元素。順帶需要提到的一點就是，這兩個標籤元素在各個瀏覽器中的共同點是都屬於系統控制元素，邊框樣式以及按鈕背景都是跟系統主題有著絕對性的關係。

使用相同的XHTML結構程式碼，分別針對FF瀏覽器和IE瀏覽器進行比較。

<input type="button" value="按鈕" />
<hr />
<button>按鈕</button>

示範動畫1示範動畫2

透過預設的目前系統主題的樣式影響，我們發現IE瀏覽器在對button和input這兩個標籤元素的解析上已經是存在著一點細節上的不同，但就目前這個系統主題中所看到的頁面表現效果是近乎於相同的，關於這點有興趣的同學可以自行實驗一下。在上列所看到的無任何CSS樣式定義之前的屬性結果中，我們得到的結果是：

* FF瀏覽器：input標籤和button標籤的邊框樣式為border-width:3px; border-style:outset; border-color:#E5E5E5;
* IE瀏覽器：input標籤邊框樣式為border-width:2px; border-style:outset;而button標籤邊框樣式為border-width:2px;

有了這些資料之後，我們再看看當我們針對border邊框屬性定義了樣式之後會是怎麼樣的一個結果。