在进行 web 前端开发时，我们通常需要对网页进行样式重置，使得我们的样式能够更加统一和规范。这时候就需要用到 CSS Reset 技术。CSS Reset 技术是一种用来清除浏览器默认样式的方法，它可以帮助我们在不同浏览器中实现一致的样式效果。
本文将对国内外典型的 CSS Reset 进行对比，帮助读者更好地了解 CSS Reset 技术，并提供一些指导性的意义。
国外典型 CSS Reset
Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 技术之一，由 CSS 专家 Eric Meyer 开发。它可以清除浏览器默认样式，并使得元素的表现更加统一。它的代码如下：
// www.javascriptcn.com code example
/* Eric Meyer's 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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Eric Meyer's Reset CSS 适用于大多数情况下的样式重置，但是它并没有考虑到 HTML5 新标签的出现，因此在使用时需要特别注意。
Normalize.css
相比于 Eric Meyer's Reset CSS，Normalize.css 更加注重浏览器兼容性。它可以使得不同浏览器中的样式更加一致。Normalize.css 的代码如下：
// www.javascriptcn.com code example
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Remove the additional vertical align inherent in middle and bottom aligned
* objects in Safari.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}Normalize.css 是一种相对较新的 CSS Reset 技术，它可以使得不同浏览器中的样式更加一致，是目前比较流行的一种 CSS Reset 方案。
国内典型 CSS Reset
Reset.css
Reset.css 是国内知名前端开发者张鑫旭开发的一种 CSS Reset 技术。它可以清除浏览器默认样式，并使得元素的表现更加统一。它的代码如下：
// www.javascriptcn.com code example
/* 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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Reset.css 与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重中文排版的问题，因此它的表现更加适合中文网站。
Yahoo Reset CSS
Yahoo Reset CSS 是雅虎前端开发者开发的一种 CSS Reset 技术，它可以清除浏览器默认样式，并使得元素的表现更加统一。它的代码如下：
// www.javascriptcn.com code example
/* Yahoo Reset CSS */
html {
color: #000;
background: #FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup {
font-style: inherit;
font-weight: inherit;
}
del,ins {
text-decoration: none;
}
li {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
q:before,q:after {
content: '';
}
abbr,acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}
legend {
color: #000;
}Yahoo Reset CSS 的代码与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重表单元素的样式，因此在表单样式重置时更加适合。
对比分析
三种 CSS Reset 技术的代码非常相似，它们都可以清除浏览器默认样式，并使得元素的表现更加统一。但是它们在一些细节上有所不同，因此需要根据自己的需求选择适合自己的 CSS Reset 技术。
Eric Meyer's Reset CSS 是最早的 CSS Reset 技术之一，代码简洁，适用于大多数情况下的样式重置，但是它并没有考虑到 HTML5 新标签的出现，因此在使用时需要特别注意。
Normalize.css 更加注重浏览器兼容性，它可以使得不同浏览器中的样式更加一致，是目前比较流行的一种 CSS Reset 方案。
Reset.css 与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重中文排版的问题，因此它的表现更加适合中文网站。
Yahoo Reset CSS 的代码与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重表单元素的样式，因此在表单样式重置时更加适合。
指导意义
CSS Reset 技术是前端开发中非常重要的一部分，它可以帮助我们在不同浏览器中实现一致的样式效果。在使用 CSS Reset 技术时，我们需要根据自己的需求选择适合自己的 CSS Reset 技术。同时，在使用 CSS Reset 技术时，我们需要注意一些细节问题，例如 HTML5 新标签的出现、中文排版的问题以及表单元素的样式等。
本文介绍了国内外典型的 CSS Reset 技术，并对它们进行了对比分析，希望能够帮助读者更好地了解 CSS Reset 技术，并提供一些指导性的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53299a941bf7134998cfc