|
border:0;的渲染結果
首先我們來看看border:0;在FF瀏覽器和IE瀏覽器中的最終渲染結果。
input {border:0;}
button {border:0;}
這時我們可以通過firebug（1.5.0版本）看到樣式中所顯示的代碼是border:0 none;而并不是我們最初所設定的border:0;也就是說FF瀏覽器會將邊框樣式解析為none（border-style:none;）。
演示動畫3
通過firebug中“計算出的樣式”功能我們可以看到最終的邊框樣式中border-width為0，border-color為#000000，border-style為none。現(xiàn)在我們再看一下IE瀏覽器中的表現(xiàn)是怎么樣的。
在IE瀏覽器中我們利用的是IE Developer Toolbar來查看瀏覽器的最終渲染結果，很明顯的可以發(fā)現(xiàn)IE瀏覽器對border:0;的解析時產(chǎn)生了一些偏差，僅僅只是渲染了border- width的屬性，而對于input標簽中的border-style屬性繼續(xù)保持著原有的屬性值outset，對于button標簽中的border- style屬性增加了outset屬性值；border-color還是為定義。這時我們也能發(fā)現(xiàn)IE瀏覽器中input標簽和button標簽的邊框已經(jīng)被定義為相同的屬性。
演示動畫4
此時FF瀏覽器和IE瀏覽器之間存在的差異是border-style和border-color兩個屬性。
出處：小志博客
責任編輯：bluehearts
上一頁 border邊框在瀏覽器中的渲染方式 [1] 下一頁 border邊框在瀏覽器中的渲染方式 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 border邊框在瀏覽器中的渲染方式 [2]
