在开发网站时，我们常常需要重置浏览器默认的样式，以便在所有浏览器中得到一致的显示效果。这就是所谓的 CSS Reset。但是，不同浏览器的默认样式不同，因此需要实现一个跨浏览器兼容的 CSS Reset，这是前端开发中必不可少的一项技能。
为什么需要 CSS Reset？
不同浏览器对 HTML 元素的默认样式不尽相同，这样就会导致不同的浏览器渲染同一个页面时，显示效果存在差异。例如，在 Firefox 浏览器中，H1 标签默认样式为：
font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em;
而在 Chrome 浏览器中，H1 标签默认样式为：
font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em;
因此，如果我们不进行重置，那么在不同的浏览器中，同一个页面就会呈现出不同的显示效果。
实现一个 CSS Reset
下面，我们来手把手教你如何实现一个跨浏览器兼容的 CSS Reset。
Step 1：重置所有元素的样式
首先，我们需要将所有 HTML 元素的默认样式全部清除。为了避免影响到 HTML5 新增的元素与属性，我们将样式重置为如下内容：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}这段 CSS 样式代码中，将所有 HTML 元素的外边距、内边距和边框设为 0，将字体大小设置为 100%，字体设置为继承，垂直对齐方式设置为基线，盒子模型设置为 border-box。
Step 2：重置链接样式
接下来，我们需要重置链接的默认样式。在默认情况下，在不同浏览器中，链接会带有下划线、颜色和背景色等不同的样式。我们可以使用如下 CSS 样式代码来重置链接样式：
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}这段 CSS 样式代码中，将链接的下划线设为 none，将文字颜色设置为继承，将鼠标样式设置为指针。
Step 3：重置列表样式
对于列表样式，我们也需要进行重置。在默认情况下，不同浏览器中，无序列表和有序列表的样式存在差异。因此，我们可以使用如下 CSS 样式代码来重置列表样式：
ul, ol {
list-style: none;
}这段 CSS 样式代码中，将无序列表和有序列表的样式全部清除。
Step 4：重置表单样式
最后，我们需要对表单样式进行重置。在默认情况下，表单元素的样式也存在浏览器差异。我们可以使用如下 CSS 样式代码来重置表单样式：
input, button, select, textarea {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}这段 CSS 样式代码中，将输入框、按钮、下拉列表和文本域的样式全部清除。
总结
通过上面的步骤，我们就实现了一个跨浏览器兼容的 CSS Reset。这个 CSS Reset 可以帮助我们消除不同浏览器之间的默认样式差异，从而使我们的页面在不同浏览器中得到一致的显示效果。请注意，这个 CSS Reset 可能会影响到一些 UI 库或框架的样式，因此在使用它时，请仔细测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594fe84eb4cecbf2d94191b