在前端开发中，样式表文件扮演着非常重要的角色。但是，虽然我们都会写样式表，但是在不同的浏览器和设备上，同一个样式表的渲染结果可能不尽相同，甚至有些难以预测。这就导致了我们在写样式表的时候需要考虑很多兼容性问题，对开发造成了不少困扰。
CSS Reset 和 normalize.css 就是两种帮助我们解决兼容性问题的方案。本文将详解这两种方案的差异、使用方法和效果，并给出一些示例代码。
什么是 CSS Reset
CSS Reset 是一种让样式表在不同浏览器上具有一致表现的方案。所谓“Reset”，就是将浏览器默认的样式全部去掉，然后给每个元素上默认样式。这样，我们在写样式表的时候就能够保证不同浏览器的渲染效果是一致的了。
可以说，CSS Reset 的出现，解决了前端开发中一个非常头疼的问题。但是，CSS Reset 也有其缺点。由于 Reset 了浏览器的默认样式，所以开发者需要重新对每个元素进行样式定义，这对于非常大型的项目而言是一项很耗费时间和精力的工作。
以下是一个常见的 CSS Reset 代码示例：
// javascriptcn.com 代码示例
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;
}什么是 normalize.css
与 CSS Reset 不同的是，normalize.css 力求保留浏览器默认的特性，仅仅是通过 CSS 来修复一些常见的、跨浏览器的样式问题。normalize.css 不会将浏览器的默认样式全部去掉，而是尽可能地保留浏览器的默认样式，只修复一些让开发者感觉不够保险的问题，比如 HTML5 元素的样式表现和显示不一致的字体大小等问题。
normalize.css 能够让开发者在样式表中使用更加语义化的标签，因为它不会对这些标签进行样式重置。在一些需要考虑 SEO 的项目中，这一点是非常重要的。
以下是一个常见的 normalize.css 代码示例：
// javascriptcn.com 代码示例
/* Heading margins */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0; }
/* Paragraph margins */
p {
margin-top: 0;
margin-bottom: 1rem; }
/* List margins reset */
ul, ol, li {
margin: 0;
padding: 0;
list-style: none;
}
/* Remove HTML5 display search from screen readers */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }使用建议
CSS Reset 和 normalize.css 在解决浏览器兼容性问题方面都起到了很好的效果。但是，具体采用哪一种方案，还需要根据项目的具体情况来决定。
如果是一个非常庞大的项目，需要自己编写所有的样式，统一的风格非常重要，那么 CSS Reset 绝对是最好的选择。但是如果是一个较小型的项目，对样式的一致性问题并不是太在意，那么 normalize.css 可能是更好的选择。
最后，要注意的是，无论采用 CSS Reset 还是 normalize.css，在应用之前，都需要仔细阅读其文档，并理解其中包含的样式规则，以免不必要的麻烦。
总结
CSS Reset 和 normalize.css 都是解决浏览器兼容性问题的方案，它们的差异在于是否将浏览器的默认样式全部去掉。CSS Reset 比较适合大型项目，normalize.css 则更适合较小型的项目。在选择之前，应该仔细阅读其文档，理解其中包含的样式规则。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654cba8a7d4982a6eb61ec8c