`

10款浏览器CSS Reset的方法

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

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

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

这也是一款CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,也是 最占用资源的方法。对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地进行CSS重设,以减 少资源浪费。下面是Yahoo的CSS重设代码,也是受最多人喜爱的CSS Reset方法,YUI选择的方法是:

 <wbr></wbr>

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

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

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

Eric Meyer Reset 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: "" "";
}

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

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

像你看到的,这些都大同小异,需求不同,方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset,也用了Yahoo的代码。

分享到:
评论

相关推荐

    浏览器CSS Reset的十种方法

    CSS Reset,也被称为Reset CSS,是Web开发中一种常见的技术,用于消除不同浏览器之间的默认样式差异,确保网页在所有浏览器上展示的一致性。由于各个浏览器对HTML元素的默认样式处理不尽相同,如果不进行CSS Reset,...

    Reset_CSS css样式重置文件

    CSS Reset即是对浏览器的默认CSS规则进行初始化,保证不同浏览器下CSS的一致性。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为...

    一个微小的现代CSSreset

    在网页设计中,CSS Reset(也称为CSS重置或CSS重置)是一个重要的技术,用于消除浏览器之间的默认样式差异,确保元素在所有浏览器中的表现一致。"一个微小的现代CSS reset" 指的是一种轻量级的CSS重置方案,它针对...

    Css Reset 复位相关资料整理

    在描述中提到,CSS Reset就是最常用的CSS复位方法,它包括了清除浏览器对于HTML元素的默认设置。在文档的部分内容中,可以看到几种不同版本的CSS Reset示例,下面将详细解释这些示例以及它们各自的特点。 ...

    通用的css reset

    CSS Reset是一种常见的前端开发技术,用于清除浏览器默认样式,实现跨浏览器的一致性显示效果。在多人协作项目中尤为重要,能够帮助团队成员避免因浏览器默认样式差异导致的布局不一致问题。 #### 通用CSS Reset的...

    css reset框架

    CSS Reset的目的是将所有元素的默认样式重置为零或无,使得网页在不同浏览器下有更一致的渲染效果。常见的CSS Reset包括Eric Meyer Reset、normalize.css等。这个"css reset框架"则是在这些基础上进行了优化和定制,...

    CSS RESET个人总结

    CSS Reset,也称为CSS重置或CSS初始化,是Web开发中的一个重要概念,旨在消除不同浏览器之间的默认样式差异,确保网页在各个浏览器上呈现一致的布局。这个过程涉及到清除浏览器默认赋予HTML元素的样式,以便开发者...

    cssreset-min.css

    做过前端的朋友都知道,目前众多的浏览器,对于HTML的解析并不是完全一样。...&lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"&gt;

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    CSS Reset 样式重置的实现示例.pdf

    在网页设计中,CSS Reset(样式重置)是一项基础且至关重要的工作,其目的是消除不同浏览器之间的默认样式差异,确保跨平台、跨浏览器的一致性。默认情况下,每个浏览器都有自己的用户代理样式表(UA stylesheet),...

    css safari浏览器识别CSS hack.docx

    更推荐的做法是遵循Web标准,使用渐进增强或优雅降级策略,并尽量依赖于专门的CSS重置库(如Normalize.css或Reset.css)来消除浏览器之间的默认样式差异。只有在必要时,才应该考虑使用特定的CSS Hack来确保在Safari...

    Reset CSS研究

    【Reset CSS】是一种重要的前端开发技术,用于消除不同浏览器之间的默认样式差异,确保网页在所有浏览器上呈现一致的布局。它的出现源于早期浏览器对CSS样式处理的不一致性,特别是像Tantek在2004年创建的`undohtml....

    reset.css & normalize.css 下载

    reset.css,由Eric Meyer发起,是一种广泛使用的CSS重置方法。它的主要目标是将所有元素的默认样式重置为零或无,以消除浏览器的默认样式差异。以下是一些reset.css可能会包含的关键规则: 1. 通用选择器`*`用于...

    CSS在不同浏览器中兼容问题

    * Firefox 和 IE 中的 default 样式不同,解决方法是设置合适的 CSS Reset * IE 中的 default 行高问题,解决方法是设置合适的 line-height 五、vertical-align 的问题 * Firefox 中可以实现 div 垂直居中的问题,...

    各浏览器默认的css

    在标签“源码”和“工具”中,“源码”可能是指文章提供了部分浏览器默认CSS的源代码示例,而“工具”可能是指开发者可以利用这些信息来创建跨浏览器兼容的CSS重置或初始化文件,如Eric Meyer Reset或 Normalize.css...

    css reset默认设置

    css reset,导入该css文件,给一些标签添加相同的默认设置,防止在不同的浏览器中出现差异

    css多浏览器兼准则

    通过使用CSS重置(如Eric Meyer Reset)或Normalize.css,可以消除这些默认样式,让不同浏览器之间的表现更接近。 4. **使用跨浏览器的CSS3选择器**:尽管现代浏览器对CSS3选择器支持较好,但老版本浏览器可能不...

    css reset初始化设置.docx

    为了确保跨浏览器的一致性,并且使页面样式更加可控,CSS Reset 成为了一种广泛采用的技术手段。本文将详细介绍 CSS Reset 的核心概念、作用以及一个具体的实现案例——Eric Meyer 的 CSS Reset,帮助开发者更好地...

Global site tag (gtag.js) - Google Analytics