分析border邊框屬性在瀏覽器中的渲染方式

分析border邊框屬性在瀏覽器中的渲染方式 首發小志博客，如果感覺內容還不錯而要轉載的朋友請不要憐惜 http://blog.linxz.cn/ 這么一個URL，謝謝！

針對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邊框屬性定義了樣式之后會是怎么樣的一個結果。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈