在前端开发中，我们经常需要使用 CSS Reset 来重置浏览器的默认样式。但是，不同浏览器的默认样式也不尽相同，因此需要针对不同浏览器进行不同的 CSS Reset。本文将介绍不同浏览器下的 CSS Reset 初体验，并提供一些指导意义和示例代码。
不同浏览器的默认样式
在开始使用 CSS Reset 之前，我们需要了解不同浏览器的默认样式。下面是一些常见浏览器的默认样式：
Chrome
body {
display: block;
margin: 8px;
}Firefox
body {
display: block;
margin: 8px 0;
}Safari
body {
display: block;
margin: 16px;
}Internet Explorer
body {
display: block;
margin: 8px;
}可以看到，不同浏览器的默认样式有所不同，这也导致了在不同浏览器中显示的页面可能会有差异。因此，我们需要使用 CSS Reset 来重置浏览器的默认样式，以便在不同浏览器中显示一致的页面。
CSS Reset 的作用
CSS Reset 的作用是重置浏览器的默认样式，使得所有浏览器下的元素样式表现一致。CSS Reset 一般包括以下几个方面：
- 设置元素的 margin 和 padding 为 0；
- 设置元素的 border 为 0；
- 设置所有元素的 font-size 和 line-height 为 0 或者一个较小的值；
- 去掉所有链接的下划线。
不同浏览器下的 CSS Reset
下面是一些常见的 CSS Reset，针对不同浏览器进行了不同的重置。
Eric Meyer’s Reset
Eric Meyer’s Reset 是最早的 CSS Reset 之一，它针对大多数元素进行了重置，但是没有对表单元素进行重置。这个 Reset 的代码如下：
// www.javascriptcn.com code example
/* Eric Meyer’s 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, 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;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
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;
}Normalize.css
Normalize.css 是一个比较流行的 CSS Reset，它不仅重置了浏览器的默认样式，还修复了一些常见的浏览器兼容性问题。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 `:invalid` styles in Firefox.
*/
:-moz-ui-invalid {
box-shadow: none;
}
/* 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;
}Yahoo! Reset
Yahoo! Reset 是 Yahoo! 开发团队提供的 CSS Reset，它与 Eric Meyer’s Reset 类似，但是对表单元素也进行了重置。这个 Reset 的代码如下：
// www.javascriptcn.com code example
/* Yahoo! Reset */
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;
}
input,textarea,select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
}
/* remove IE outline */
a:focus {
outline: none;
}
/* end Yahoo! Reset */使用 CSS Reset 的注意事项
在使用 CSS Reset 的过程中，需要注意以下几个问题：
- 不要过度使用 CSS Reset，否则可能会破坏浏览器的默认样式，导致一些不必要的问题；
- 使用 CSS Reset 的同时，需要保持一定的灵活性，根据实际情况进行调整；
- 在使用 CSS Reset 的同时，需要进行兼容性测试，以确保在不同浏览器中都能够正常显示。
示例代码
下面是一个使用 Normalize.css 的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css">
<style>
/* 这里可以写自己的样式 */
</style>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>结语
本文介绍了不同浏览器下的 CSS Reset 初体验，并提供了一些指导意义和示例代码。在实际开发中，需要根据实际情况选择合适的 CSS Reset，并进行兼容性测试，以确保在不同浏览器中都能够正常显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1483ca941bf71342b3565