讨论网站建设与网页设计相关内容。进入论坛！

使用软件：阅读次数：收录时间：2008-11-24

目前比较全的CSS重设(reset)方法总结

作者：暴风彬彬来源：blog.bingo929.com

在当今网页设计/开发实践中，使用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，这样就能避免发生这种问题。

　　今天暴风彬彬总结收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

　　彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

一.最简化的CSS Reset(重设) :

* {
padding: 0;
margin: 0;
}

这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

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

这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

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

在前两个的基础上添加了outline属性的重设，防止一些冲突。

二.浓缩实用型CSS Reset(重设):

* {
     vertical-align: baseline;
     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:

html, body {
   padding: 0;
   margin: 0;
}
html {
   font-size:1em;
}
body {
   font-size:100%;
}
a img, :link img, :visited img {
   border:0px;
}

这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

{
   vertical-align: baseline;
   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: 20px 0;
}
li, dd, blockquote {
   margin-left: 40px;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

五.Shaun Inman’s Global Reset

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:

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

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: “” “”;
}

八.Condensed Meyer Reset:

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

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
}

十.Chris Poteet’s Reset 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: 20px 0;
}
li, dd, blockquote {
   margin-left: 40px;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

十一.Tantek Celik Reset 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 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

十二.Christian Montoya Reset CSS

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: 1em 0;
   padding: 0;
}
li, dd, blockquote {
   margin-left: 1em;
}
form label {
   cursor: pointer;
}
fieldset {
   border: none;
}
input, select, textarea {
   font-size: 100%;
   font-family: inherit;
}

十三.Rudeworks Reset CSS

*{
    margin: 0;
   padding: 0;
   border: none;
}
html {
   font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
   text-shadow: #000 0px 0px 0px;
}
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: 0 0 1em 0;
}
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, “Lucida Console”, courier, mono-space;
}
del {
   text-decoration: line-through;
}
ins, dfn {
   border-bottom: 1px solid #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;
}
a abbr, a acronym {
   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;
}
a img {
   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: 0 auto;
   text-align: left;
}

十四.Anieto2K Reset 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
}

十五.CSSLab CSS 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;
}
a img, iframe {
   border: none;
}
ol, ul {
   list-style: none;
}
input, textarea, select, button {
   font-size: 100%;
   font-family: inherit;
}
select {
   margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/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;}

好了，CSS重设目前先总结到这里，这15套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套CSS重设。如果您有什么意见或是看法，欢迎发表评论。

教程导航

HTML/CSS热门教程

Div+CSS设计网站的优点

网页设计行业从业者越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行...

作者：

30余个CSS导航菜单效果

30余个CSS导航菜单效果,多种风格任你选择,以后做导航可以轻松许多,建议收藏使用,同时感谢blueidea.com的编辑整理. ---------- 演示 ---------- ---------- 下载 ...

作者：explodingboy

HTML初学者教程-表格

本站原创内容,转载请注明出处网页教学网。全世界的网站基本上都是使用HTML表格对页面区域进行规划的，而现在的web标准建站中提倡抛弃表格，我认为表格规划确...

作者：闪电儿

form的submit方法和submit事件

一、问题描述当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用input.select()做了测试，却能响应selec...

作者：大米

div里面图片垂直居中的几个例子

在div-css布局运用中，如何让图片在容器里垂直居中是很多人询问的问题，这里收集了几个例子 WWYTechFeel 第一个例子 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1....

作者：