本文和大家重点讨论一下主流浏览器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
【编辑推荐】