本文和大家重點(diǎn)討論一下主流瀏覽器CSS Reset的方法，在各種瀏覽器中，都會對CSS的選擇器默認(rèn)一些數(shù)值，有了CSS Reset以后會讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)一致。

主流瀏覽器CSS Reset的方法

知道CSS Reset是什么嗎？通常情況下，它也被寫成Reset CSS，即重設(shè)瀏覽器的樣式。在各種瀏覽器中，都會對CSS的選擇器默認(rèn)一些數(shù)值，譬如當(dāng)h1沒有被設(shè)置數(shù)值時，顯示一定大小。但并不是所有的瀏覽器都使用一樣的數(shù)值，所以，有了CSS Reset，以讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)一致。

正在使用CSS的你，用過CSS Reset嗎？當(dāng)然，或許你用了，卻不知道正在用，比如你可能用到： 

*{padding:0;margin:0;border:0;}  
 

這也是一款CSS Reset的方法，讓所有的選擇器的padding、margin和border都設(shè)置成0。這是一種強(qiáng)大的方法，也是最簡單，最安全的方法，不過，也是最占用資源的方法。對于小型的網(wǎng)站來說，用這個并不會帶來大的資源浪費(fèi)，但如果是像Yahoo這種架構(gòu)非常大的網(wǎng)站，剛需要有選擇地進(jìn)行CSS重設(shè)，以減少資源浪費(fèi)。下面是Yahoo的CSS重設(shè)代碼，也是受最多人喜愛的CSS Reset方法，YUI選擇的方法是：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,  
form,fieldset,input,textarea,p,blockquote,th,td{  
padding:0;  
margin:0;  
}  
table{  
border-collapse:collapse;  
border-spacing:0;  
}  
fieldset,img{  
border:0;  
}  
address,caption,cite,code,dfn,em,strong,th,var{  
font-weight:normal;  
font-style:normal;  
}  
ol,ul{  
list-style:none;  
}  
caption,th{  
text-align:left;  
}  
h1,h2,h3,h4,h5,h6{  
font-weight:normal;  
font-size:100%;  
}  
q:before,q:after{  
content:”;  
}  
abbr,acronym{border:0;  
}  
 

 #p#OK，相信你也已經(jīng)了解了CSS重設(shè)的目的，或許你也可以根據(jù)自己的喜好，寫一個自己的CSS重設(shè)系統(tǒng)，畢竟大家的需求和習(xí)慣的不同的。而你可以參照下面的幾款：

 AteneuPopularCSS Reset

 html,body,div,span,applet,object,iframe,h1,h2,h3,  
h4,h5,h6,p,blockquote,pre,a,abbr,acronym,  
address,big,cite,code,del,dfn,em,font,img,ins,  
kbd,q,s,samp,small,strike,strong,sub,sup,tt,  
var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,  
table,caption,tbody,tfoot,thead,tr,th,td{  
margin:0;  
padding:0;  
border:0;  
outline:0;  
font-weight:inherit;  
font-style:inherit;  
font-size:100%;  
font-family:inherit;  
vertical-align:baseline;  
}  
:focus{outline:0;}  
a,a:link,a:visited,a:hover,a:active{text-decoration:none}  
table{border-collapse:separate;border-spacing:0;}  
th,td{text-align:left;font-weight:normal;}  
img,iframe{border:none;text-decoration:none;}  
ol,ul{list-style:none;}  
input,textarea,select,button{font-size:100%;font-family:inherit;}  
select{margin:inherit;}  
hr{margin:0;padding:0;border:0;color:#000;background-color:#000;height:1px} 

ChrisPoteet’sReset CSS

*{  
vertical-align:baseline;  
font-family:inherit;  
font-style:inherit;  
font-size:100%;  
border:none;  
padding:0;  
margin:0;  
}  
body{  
padding:5px;  
}  
h1,h2,h3,h4,h5,h6,p,pre,blockquote,form,ul,ol,dl{  
margin:20px0;  
}  
li,dd,blockquote{  
margin-left:40px;  
}  
table{  
border-collapse:collapse;  
border-spacing:0;  
}  
 

 #p#EricMeyerReset CSS

html,body,div,span,applet,object,iframe,table,caption,  
tbody,tfoot,thead,tr,th,td,del,dfn,em,font,img,ins,  
kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,  
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,  
acronym,address,big,cite,code,dl,dt,dd,ol,ul,li,  
fieldset,form,label,legend{  
vertical-align:baseline;  
font-family:inherit;  
font-weight:inherit;  
font-style:inherit;  
font-size:100%;  
outline:0;  
padding:0;  
margin:0;  
border:0;  
}  
:focus{  
outline:0;  
}  
body{  
background:white;  
line-height:1;  
color:black;  
}  
ol,ul{  
list-style:none;  
}  
table{  
border-collapse:separate;  
border-spacing:0;  
}  
caption,th,td{  
font-weight:normal;  
text-align:left;  
}  
blockquote:before,blockquote:after,q:before,q:after{  
content:"";  
}  
blockquote,q{  
quotes:"""";  
}  
 

 TantekCelikReset CSS 

:link,:visited{text-decoration:none}  
ul,ol{list-style:none}  
h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;}  
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input  
{margin:0;padding:0}  
aimg,:linkimg,:visitedimg{border:none}  
address{font-style:normal}  
 

ChristianMontoyaResetCSS

html,body,form,fieldset{  
margin:0;  
padding:0;  
font:100%/120%Verdana,Arial,Helvetica,sans-serif;  
}  
h1,h2,h3,h4,h5,h6,p,pre,  
blockquote,ul,ol,dl,address{  
margin:1em0;  
padding:0;  
}  
li,dd,blockquote{  
margin-left:1em;  
}  
formlabel{  
cursor:pointer;  
}  
fieldset{  
border:none;  
}  
input,select,textarea{  
font-size:100%;  
font-family:inherit;  
}  
 

#p#RudeworksResetCSS
 

*{  
margin:0;  
padding:0;  
border:none;  
}  
html{  
font:62.5%"LucidaGrande",Lucida,Verdana,sans-serif;  
text-shadow:#0000px0px0px;  
}  
ul{  
list-style:none;  
list-style-type:none;  
}  
h1,h2,h3,h4,h5,h6,p,pre,  
blockquote,ul,ol,dl,address{  
font-weight:normal;  
margin:001em0;  
}  
cite,em,dfn{  
font-style:italic;  
}  
sup{  
position:relative;  
bottom:0.3em;  
vertical-align:baseline;  
}  
sub{  
position:relative;  
bottom:-0.2em;  
vertical-align:baseline;  
}  
li,dd,blockquote{  
margin-left:1em;  
}  
code,kbd,samp,pre,tt,var,input[type='text'],textarea{  
font-size:100%;  
font-family:monaco,"LucidaConsole",courier,mono-space;  
}  
del{  
text-decoration:line-through;  
}  
ins,dfn{  
border-bottom:1pxsolid#ccc;  
}  
small,sup,sub{  
font-size:85%;  
}  
abbr,acronym{  
text-transform:uppercase;  
font-size:85%;  
letter-spacing:.1em;  
border-bottom-style:dotted;  
border-bottom-width:1px;  
}  
aabbr,aacronym{  
border:none;  
}  
sup{  
vertical-align:super;  
}  
sub{  
vertical-align:sub;  
}  
h1{  
font-size:2em;  
}  
h2{  
font-size:1.8em;  
}  
h3{  
font-size:1.6em;  
}  
h4{  
font-size:1.4em;  
}  
h5{  
font-size:1.2em;  
}  
h6{  
font-size:1em;  
}  
a,a:link,a:visited,a:hover,a:active{  
outline:0;  
text-decoration:none;  
}  
aimg{  
border:none;  
text-decoration:none;  
}  
img{  
border:none;  
text-decoration:none;  
}  
label,button{  
cursor:pointer;  
}  
input:focus,select:focus,textarea:focus{  
background-color:#FFF;  
}  
fieldset{  
border:none;  
}  
.clear{  
clear:both;  
}  
.float-left{  
float:left;  
}  
.float-right{  
float:right;  
}  
body{  
text-align:center;  
}  
#wrapper{  
margin:0auto;  
text-align:left;  
}  
 

 #p#Anieto2KReset CSS 

html,body,div,span,applet,object,iframe,  
h1,h2,h3,h4,h5,h6,p,  
blockquote,pre,a,abbr,acronym,address,big,  
cite,code,del,dfn,em,font,img,  
ins,kbd,q,s,samp,small,strike,  
strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,  
fieldset,form,label,legend,  
table,caption,tbody,tfoot,thead,tr,th,td,  
center,u,b,i{  
margin:0;  
padding:0;  
border:0;  
outline:0;  
font-weight:normal;  
font-style:normal;  
font-size:100%;  
font-family:inherit;  
vertical-align:baseline  
}  
body{  
line-height:1  
}  
:focus{  
outline:0  
}  
ol,ul{  
list-style:none  
}  
table{  
border-collapse:collapse;  
border-spacing:0  
}  
blockquote:before,blockquote:after,q:before,q:after{  
content:""  
}  
blockquote,q{  
quotes:""""  
}  
input,textarea{  
margin:0;  
padding:0  
}  
hr{  
margin:0;  
padding:0;  
border:0;  
color:#000;  
background-color:#000;  
height:1px  
}  
 

 CSSLabCSS Reset

html,body,div,span,applet,object,iframe,h1,h2,h3,  
h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,  
big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,  
small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,  
fieldset,form,label,legend,table,caption,tbody,tfoot,  
thead,tr,th,td{  
margin:0;  
padding:0;  
border:0;  
outline:0;  
font-weight:inherit;  
font-style:inherit;  
font-size:100%;  
font-family:inherit;  
vertical-align:baseline;  
}  
:focus{  
outline:0;  
}  
table{  
border-collapse:separate;  
border-spacing:0;  
}  
caption,th,td{  
text-align:left;  
font-weight:normal;  
}  
aimg,iframe{  
border:none;  
}  
ol,ul{  
list-style:none;  
}  
input,textarea,select,button{  
font-size:100%;  
font-family:inherit;  
}  
select{  
margin:inherit;  
}  
/*Fixesincorrectplacementofnumbersinol’sinIE6/7*/  
ol{margin-left:2em;}  
/*==clearfix==*/  
.clearfix:after{  
content:".";  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
.clearfix{display:inline-block;}  
*html.clearfix{height:1%;}  
.clearfix{display:block;}  
 

像你看到的，這些都大同小異，需求不同，方法也就不同。我自己偏向于喜歡Yahoo的CSS Reset，也用了Yahoo的代碼。你，有自己的CSS Reset體系嗎？或許可以分享出來！

CSS Reset代碼來源：10TécnicasparaResetCSS

【編輯推薦】

1. 探究瀏覽器Firefox與IE在CSS樣式表中的差異
2. 區(qū)分IE6 IE7和IE8瀏覽器行之有效的辦法
3. 剖析Margin和Padding屬性中四個值的先后順序及區(qū)別
4. 九步輕松解決IE6的各種疑難雜癥
5. 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題