在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。
正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。
一.最简化的CSS Reset(重设) :
CSS Code复制内容到剪贴板- *{ padding:0; margin:0; }
这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。
CSS Code复制内容到剪贴板- *{ padding:0; margin:0; border:0; }
这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。
CSS Code复制内容到剪贴板- *{ outline:0; padding:0; margin:0; border:0; }
在前两个的基础上添加了outline属性的重设，防止一些冲突。
二.浓缩实用型CSS Reset(重设):
- *{ vertical-align:baselinebaseline; font-weight:inherit; font-family:inherit; font-style:inherit; font-size:100%; outline:0; padding:0; margin:0; border:0; }
该CSS重设方法出自Perishable Press，这是他常用的方法。
三.Poor Man 的CSS Reset:
CSS Code复制内容到剪贴板- html,body{ padding:0; margin:0; } html{ font-size:1em; } body{ font-size:100%; } aimg,:linkimg,:visitedimg{ border:0px; }
这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。
四.Siolon’s Global Reset
CSS Code复制内容到剪贴板- *{ vertical-align:baselinebaseline; font-family:inherit; fo nt-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; }
五.Shaun Inman’s Global Reset
CSS Code复制内容到剪贴板- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,embed,object{ padding:0; margin:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img,abbr{ border:0; } address,caption,cite,code,dfn,em, h1,h2,h3,h4,h5,h6,strong,th,var{ font-weight:normal; font-style:normal; } ul{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-size:1.0em; } q:before,q:after{ content:”; } a,ins{ text-decoration:none; }
六.Yahoo(YUI) CSS Reset:
CSS Code复制内容到剪贴板- 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; }
七.Eric Meyer’s CSS Reset
CSS Code复制内容到剪贴板- 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:baselinebaseline; 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:“”“”; }
八.Condensed Meyer Reset:
CSS Code复制内容到剪贴板- 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; } fieldset,img{ border:0; } table{ border-collapse:collapse; border-spacing:0; } ol,ul{ list-style:none; } address,caption,cite,code,dfn,em,strong,th,var{ font-weight:normal; font-style:normal; } 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; }
九.Ateneu Popular CSS Reset
CSS Code复制内容到剪贴板- 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:baselinebaseline; } :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 }
十.Chris Poteet’s Reset CSS
CSS Code复制内容到剪贴板- *{ vertical-align:baselinebaseline; 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; }
十一.Tantek Celik Reset CSS
CSS Code复制内容到剪贴板- :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}
十二.Christian Montoya Reset CSS
CSS Code复制内容到剪贴板- 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; }
十三.Rudeworks Reset CSS
CSS Code复制内容到剪贴板- *{ 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; bottombottom:0.3em; vertical-align:baselinebaseline; } sub{ position:relative; bottombottom:-0.2em; vertical-align:baselinebaseline; } 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-rightright{ float:rightright; } body{ text-align:center; } #wrapper{ margin:0auto; text-align:left; }
十四. Anieto2K Reset CSS
CSS Code复制内容到剪贴板- 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:baselinebaseline } 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 }
十五.CSSLab CSS Reset
CSS Code复制内容到剪贴板- 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:baselinebaseline; } :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; } ol{margin-left:2em;} .clearfix:after{ content:“.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix{display:inline-block;} *html.clearfix{height:1%;} .clearfix{display:block;}
好了，CSS重设目前先总结到这里，这15套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套CSS重设。
