|
分析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)容是：
- 小志我并不是一個(gè)分析專家，只是借助Firebug和IE developer這兩個(gè)工具在FF瀏覽器和IE瀏覽器中查看瀏覽器的渲染結(jié)果；
- 因?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é)果。
出處：小志博客
責(zé)任編輯：bluehearts
上一頁 下一頁 border邊框在瀏覽器中的渲染方式 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 border邊框在瀏覽器中的渲染方式 [1]
第 2 頁 
