分析border邊框?qū)傩栽跒g覽器中的渲染方式

分析border邊框?qū)傩栽跒g覽器中的渲染方式 首發(fā)小志博客，如果感覺內(nèi)容還不錯(cuò)而要轉(zhuǎn)載的朋友請不要憐惜 http://blog.linxz.cn/ 這么一個(gè)URL，謝謝！

針對border邊框?qū)傩栽跒g覽器中的渲染方式很早以前就開始在QQ群中看到大家在討論，而我也一直以border:0 none;的方式處理。其中當(dāng)然也是有我自己為什么要做的原因，對于這個(gè)原因在下面的分析中將會(huì)提到。在對border邊框?qū)傩赃M(jìn)行分析之前，需要說明的幾點(diǎn)內(nèi)容是：

1. 小志我并不是一個(gè)分析專家，只是借助Firebug和IE developer這兩個(gè)工具在FF瀏覽器和IE瀏覽器中查看瀏覽器的渲染結(jié)果；
2. 因?yàn)橹皇遣榭戳薋F瀏覽器和IE瀏覽器的渲染結(jié)果，并不能代表所有的瀏覽器都是相同的方式進(jìn)行渲染。

為了能更好的對邊框的樣式進(jìn)行對比，這里我們選用的是“按鈕”元素，但使用的標(biāo)簽卻是不同的，它們分別是input標(biāo)簽元素和button標(biāo)簽元素。順帶需要提到的一點(diǎn)就是，這兩個(gè)標(biāo)簽元素在各個(gè)瀏覽器中的共同點(diǎn)是都屬于系統(tǒng)控件元素，邊框樣式以及按鈕背景都是跟系統(tǒng)主題有著絕對性的關(guān)系。

使用相同的XHTML結(jié)構(gòu)代碼，分別針對FF瀏覽器和IE瀏覽器進(jìn)行對比。

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

演示動(dòng)畫1   演示動(dòng)畫2

通過默認(rèn)的當(dāng)前系統(tǒng)主題的樣式影響，我們發(fā)現(xiàn)IE瀏覽器在對button和input這兩個(gè)標(biāo)簽元素的解析上已經(jīng)是存在著一點(diǎn)細(xì)節(jié)上的不同，但就目前這個(gè)系統(tǒng)主題中所看到的頁面表現(xiàn)效果是近乎于相同的，關(guān)于這點(diǎn)有興趣的同學(xué)可以自行實(shí)驗(yàn)一下。上列所看到的無任何CSS樣式定義之前的屬性結(jié)果中，我們得到的結(jié)果是：

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

有了這些數(shù)據(jù)之后，我們再看看當(dāng)我們針對border邊框?qū)傩远x了樣式之后會(huì)是怎么樣的一個(gè)結(jié)果。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)