Reset CSS杂烩

来源：互联网发布：windows安装hadoop2.8 编辑：程序博客网时间：2024/05/21 19:41

由于不同版本的浏览器(Firefox、Opera、Internet Explorer、Chrome、Safari等)都是以各自的方式去理解CSS规范，由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值。因此会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。

CSS Reset就是针对上述问题而存在的一种避免浏览器兼容性问题的方法。我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。我们预先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

1. 最简化的CSS Reset :

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

* {      padding: 0;      margin: 0;}

在上一个重设的基础上添加对border和outline属性的重设。

 1. {       outline: 0;       padding: 0;       margin: 0;       border: 0;}

2. 浓缩实用型CSS Reset

出自Perishable Press

 {       vertical-align: baseline;       font-weight: inherit;       font-family: inherit;       font-style: inherit;       font-size: 100%;       outline: 0;       padding: 0;       margin: 0;       border: 0;}

3. Poor Man 的CSS Reset

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

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

4. Siolon’s Global Reset

* {    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;}

5. 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;}

6. 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; }

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

8. 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;}

9. 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}

10. 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; }

11. 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 }

12. Poor Man 的CSS Reset

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; }

13. 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; }

14. 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 }

15. 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;}

当然不存在一款“万金油”reset CSS样式，重要的是结合网页规划需求，打造一份合适的自己的CSS样式表。

/*KISSY CSS Reset理念：清除和重置是紧密不可分的特色：1.适应中文 2.基于最新主流浏览器维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, textarea, /* form elements 表单元素 */th, td { /* table elements 表格元素 */    margin: 0;    padding: 0;}/* 设置默认字体 */body,button, input, select, textarea { /* for ie */    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }h2 { font-size: 16px; }h3 { font-size: 14px; }h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */ul, ol { list-style: none; }/* 重置文本格式元素 */a { text-decoration: none; }a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */    border-bottom: 1px dotted;    cursor: help;}q:before, q:after { content: ''; }/* 重置表单元素 */legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 *//* 注：optgroup 无法扶正 */button, input, select, textarea {    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */}/* 重置表格元素 */table {    border-collapse: collapse;    border-spacing: 0;}/* 重置 hr */hr {    border: none;    height: 1px;}/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */html { overflow-y: scroll; }

这份reset CSS样式实现的功能：
1 清除内外边距的元素，去掉了 div, code（在测试浏览器中，没发现有边距）, 增加了 button（感觉是 YUI 遗漏了）.
2 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中，没有发现差异。（要设的话，推荐background: transparent）
3 对于 address, caption, …, em, strong 等文本格式元素，做了调整。保留了 strong 和 th 的粗体。
4 对 abbr 和 acronym 做了调整，使得在非 ie6 下可视性更好。
5 去掉了 sup 和 sub 的样式，直接用浏览器默认的即可。
6 对于 input, select, textarea 表单元素，去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因为其它 hack 经测试已失效。
7 增加了一些元素的默认样式。

/* html5doctor.com Reset Stylesheetv1.4.1 2010-03-01Author: Richard Clark - http://richclarkdesign.com*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:1;}:focus {    outline: 1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {     display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:0;    padding:0;    border:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}ins {    background-color:#ff9;    color:#000;    text-decoration:none;}mark {    background-color:#ff9;    color:#000;     font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted #000;    cursor:help;}table {    border-collapse:collapse;    border-spacing:0;}hr {    display:block;    height:1px;    border:0;       border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}input, select {    vertical-align:middle;}

项目中可以这样：Reset css +fonts.css /base.css/layout.css…….相结合的方式；在reset css中没用到的元素可以直接拿掉，减少代码量；在reset css中做好版本维护信息，方便扩展

0 0