Summary of current CSS reset (reset) methods

In today's web design/development practice, using CSS to add style styles to semantic (X) HTML tags is critical. There is a perfect world in the designers ' dreams: All browsers are able to understand and apply CSS rules and have the same visual effect (no compatibility issues). However, we do not live in this perfect world, the reality of the theft is always the opposite, many CSS styles in different browsers have different interpretations and rendering.

Some of today's popular browsers, such as Firefox, Opera, Internet Explorer, Chrome, Safari, and so on, are in their own way to understand CSS specifications, This leads to the browser's interpretation of CSS and the designer's CSS definition of conflict, so that the appearance of the Web page in some browsers can be correctly displayed according to the designer's ideas, but some browsers do not follow the way the designer wants to display, which leads to browser compatibility issues. To make things worse, some browsers completely ignore some of the CSS's declarations and properties.

Because of these conflicts and problems still exist in this "imperfect world", so some designers think of a way to avoid browser compatibility problems, that is, CSS Reset, what is CSS reset? We can call it CSS Reset, others called CSS Reset, default CSS, CSS reset and so on. CSS reset is because the various browsers interpret the initial value of CSS style is different, causing the designer to not define a CSS property, different browsers will follow their own default values to the undefined style assignment, so we have to define some CSS style, To let all browsers interpret the CSS in the same way, so that this problem can be avoided.

One. The most simplified CSS reset (reset):

* {
padding:0;
margin:0;
}

This is the most common and simplest CSS reset, setting the padding and margin values of all elements to 0, which avoids the "divergence" of some browsers in understanding the default values of the two properties.

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

This is the addition of a reset to the border property based on the previous reset, and the initial value of 0 does prevent some problems.

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

A reset of the outline property was added on top of the first two to prevent some conflicts.

Two. Condensed and useful CSS Reset (reset):

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

The CSS reset method is derived from perishable press, which is a common method.

Three. Poor man's CSS Reset:

HTML, Body {
padding:0;
margin:0;
}
HTML {
Font-size:1em;
}
Body {
font-size:100%;
}
A img,: Link img,: visited img {
border:0px;
}

This reset method sets the padding and margin of the HTML and body elements to 0, setting the initial font size for all the elements under the HTML tag and the body tag, and most importantly, removing the default border of the linked picture.

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

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

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

Seven. 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: "" ";
}

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

Nine. 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;

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

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

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

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 {

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

height:1px
}

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

Well,CSS Reset is now summarized here, the 15 sets of reset methods are in fact there are common points, perhaps some implementation methods are different, but most of them are the same goal, is to let more browsers can show the same effect. With these CSS resets as data and reference, it may be helpful to your work or even improve efficiency, but, after all, these resets are written by others, you can completely customize a set of CSS reset.

Summary of current CSS reset (reset) methods