2011年12月1日 星期四

CSS清除瀏覽器默認樣式註意點


/* 
KISSY CSS Reset 
理念:1. reset的目的不是清除瀏覽器的默認樣式,這僅是部分工作。清除和重置是緊密不可分的。
2. reset的目的不是讓默認樣式在所有瀏覽器下一致,而是減少默認樣式有可能帶來的問題。
3. reset期望提供一套普適通用的基礎樣式。但沒有銀彈,推薦根據具體需求,裁剪和修改後再使用。
特色:1.適應中文;2.基於最新主流瀏覽器。
維護:玉伯,正淳
Revision: 276
*/
/**清除內外邊距**/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements結構元素*/
dl, dt, dd, ul, ol, li, /* list elements列表元素*/
pre, /* text formatting elements文本格式元素*/
form, fieldset, legend, button, input, textarea, /* form elements表單元素*/
th, td /* table elements表格元素*/ {
margin: 0;
padding: 0;
}
/**設置默認字體**/ 
body, 
button, input, select, textarea /* for ie */ { 
font: 12px/1.5 tahoma, arial, simsun, sans-serif; 

h1, h2, h3, h4, h5 , h6 { font-size: 100%; } 
address, cite, dfn, em, var { font-style: normal; } /*將斜體扶正*/ 
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /*統一等寬字體*/ 
small { font-size: 12px; } /*小於12px的中文很難閱讀,讓small正常化*/
/**重置列表元素**/
ul, ol { list-style: none; }
/**重置文本格式元素**/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /*重置,減少對行高的影響*/
sub { vertical-align: text-bottom; }
/**重置表單元素**/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img搭車:讓鏈接裡的img無邊框*/
button, input, select, textarea { font-size: 100%; } /*使得表單元素在ie下能繼承字體大小*/
/*注:optgroup無法扶正*/
/**重置表格元素**/
table { border-collapse: collapse; border-spacing: 0; }
1.性能差異
【border:0;】把border設為“0”像素雖然在頁面上看不見,但按border默認值理解,瀏覽器依然對border-width/border-color進行了渲染,即已經佔用了內存值。
【border:none;】把border設為“none”即沒有,瀏覽器解析“none”時將不作出渲染動作,即不會消耗內存值。2.兼容性差異 兼容性差異只針對瀏覽器IE6、IE7與標籤button、input而言,在win、win7、vista的XP主題下均會出現此情況。 【border:none;】當border為“none”時似乎對IE6/7無效邊框依然存在 【border:0;】當border為“0”時,感覺比“none”更有效,所有瀏覽器都一致把邊框隱藏總結: 1.對比border:0;與border:none;之間的區別在於有渲染和沒渲染,感覺他們和display:none;與visibility:hidden;的關係類似,而對於border屬性的渲染性能對比暫時沒找測試的方法,雖然認為他們存在渲染性能上的差異但也只能說是理論上。





2.如何讓border:none;實現全兼容?只需要在同一選擇符上添加背景屬性即可,
對於border:0;與border:none;個人更向於使用,border:none;,因為border:none;畢竟在性能消耗沒有爭議,而且兼容性可用背景屬性解決不足以成為障礙。

沒有留言: