主流浏览器CSS Reset的方法-css判断浏览器

本文和大家重点讨论一下主流浏览器CSS Reset的方法，在各种浏览器中，都会对CSS的选择器默认一些数值，有了CSS Reset以后会让网页的样式在各浏览器中表现一致。

主流浏览器CSS Reset的方法

知道CSS Reset是什么吗？通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。

正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能用到：

*{padding:0;margin:0;border:0;}  
 
1.
2.

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的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;  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

#p#OK，相信你也已经了解了CSS重设的目的，或许你也可以根据自己的喜好，写一个自己的CSS重设系统，毕竟大家的需求和习惯的不同的。而你可以参照下面的几款：

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} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

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;  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

#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:"""";  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

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}  
 
1.
2.
3.
4.
5.
6.
7.
8.

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;  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

#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;  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.

#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  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.

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;}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

像你看到的，这些都大同小异，需求不同，方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset，也用了Yahoo的代码。你，有自己的CSS Reset体系吗？或许可以分享出来！

CSS Reset代码来源：10TécnicasparaResetCSS

【编辑推荐】