|
border:none;的渲染結(jié)果
input {border:none;}
button {border:none;}
border:none;的邊框定義方式，從廣義上理解，其實只是定義了border-style的屬性值，對于這點我們也可以從firebug中的樣式可以看到邊框的樣式定義已經(jīng)由原來的border:0 none;改成border:medium none;了，改變的內(nèi)容是border-width的樣式定義。
但詭異的一點就是我們這里所看到的medium屬性值卻在firebug最終“計算出的樣式”里看不到。
演示動畫5
更詭異的內(nèi)容也要出來了，趕緊打開IE瀏覽器看看是不是發(fā)現(xiàn)在頁面中按鈕的表現(xiàn)效果也不一樣了？
兩個瀏覽器的中按鈕在定義了邊框為border:none;時居然會在瀏覽器中的表現(xiàn)方式都不一樣了，這個是為什么呢？
演示動畫6
看了IE Developer Toolbar中的結(jié)果后，總算明白了，原來這個時候IE瀏覽器僅僅只是渲染了border-style為none，而border-width依然保持原有的屬性值，所以在才會與FF瀏覽器產(chǎn)生差異。
border:0 none;的渲染結(jié)果
最后剩下的是border:0 none;的邊框樣式定義方式，對于這個方式，經(jīng)過上面的兩個對比，相信大家能明白這個屬性所定義的內(nèi)容包含了什么，把border-width和 border-style同時定義為0和none值，讓邊框“無處藏身”，就算有顏色值也沒用了。對于這個的渲染結(jié)果就不再像上面一一羅列了，感興趣的同學(xué)可以試試看。
在結(jié)束之前再次推薦大家在取消頁面元素邊框的時候，盡量選擇border:0 none;避免出現(xiàn)一些不必要的問題。順帶提示一下，在IE Developer Toolbar中右下角的那個復(fù)選框大家在測試的時候可以將其勾選，可以看到更多的默認(rèn)樣式值。
分析border邊框?qū)傩栽跒g覽器中的渲染方式首發(fā)小志博客，如果感覺內(nèi)容還不錯而要轉(zhuǎn)載的朋友請不要憐惜 http://blog.linxz.cn/ 這么一個URL，謝謝！
本文鏈接：http://m.95time.cn/tech/web/2010/7417.asp 
出處：小志博客
責(zé)任編輯：bluehearts
上一頁 border邊框在瀏覽器中的渲染方式 [2] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 border邊框在瀏覽器中的渲染方式 [3]
