CSS Reset 是在不同浏览器之间实现一致性和减少浏览器样式差异的技术之一。虽然 CSS Reset 推崇 “无样式” （没有样式的层叠）的想法，但是 CSS Reset 在使用的过程中也会遇到一些常见的错误，这篇文章将会详细说明这些问题并提供解决方案。
常见错误
1. 过度重置
在 CSS Reset 中，过度重置（Over-Resetting）是指应该保持浏览器自带的样式之外的所有样式都被清除。但是过于重置会导致重复的工作，影响代码执行时间。另外，在某些情况下，一些浏览器自带的样式很有用，比如 Internet Explorer 中的伪类。
2. 太过武断
CSS Reset 过渡武断的意思是即使保留了浏览器自带的样式，但是在清除这些样式时做的太彻底。一个典型的例子是清除所有的约束样式，导致开发人员需要重新定义基本的东西，比如列表、表格等 CSS 元素。
3. 不兼容的字号和行高
在使用字号和行高时，不同浏览器之间的变化可能很大。这就需要垂直居中的行高与空间高度相符。例如，设置一个段落的行高为 1.4，但段落中含有图片和其他不可预知因素，会产生各种行高的可能性。
4. 继承
CSS Reset 尝试清空所有的继承值，但实际上，继承是优化代码的一种方式。所以有时需要保留一些有用的继承属性。
解决方案
1. 少一些 CSS Reset
如上所述，如果你在 CSS Reset 上太难，它就会影响页面的性能和可维护性。建议使用一些小型 CSS Reset ，例如 Reset.css 或者 Normalize.css。
2. 清晰并明确的样式定义
写作 CSS 风格指南（CSS Style Guide） 使代码更容易维护。虽然 CSS Reset 可以减小浏览器之间的差异，并使样式更一致，但你仍然需要定义样式模板。
3. 如何设置字体大小
设置字体大小的方法有很多，但其中常见的方法是使用相对单位，比如 em、rem 和百分比。这些相对单位将根据其父元素或根元素的字体大小改变。
例如一个文档最小字号的设置：
html {
font-size: 62.5%;
}
body {
font-size: 1.6em !important;
}此代码将将 body 字体大小设置为浏览器的默认字体大小的 16px 和根元素的字体大小相等。
4. 允许一些继承
如上所述，继承可以使代码变得更加精简。有时候，继承是必要的，例如关于标题和段落标记等元素的样式，它们通常在页面的不同部分中表示相同的内容，所以并不需要为每个单独的元素指定样式。
以下是一些常见元素的继承规则：
- 段落文本也会继承 body 文本的颜色和字号。
- 标题的上下边距通常用于分割段落，增加清晰度，所以它们应该是从父元素继承下来的。
- 块元素的行高必须清晰地定义，否则它们将从 body 继承下来。
-- -------------------- ---- ------- ---- - ---------- ------ - -- - ---------- ---- ------- -- - -- - ---------- ------ ------- -- - -- - ---------- ------ ------- -- - -- --- -- - ---------- ------ ------------ ---- -
结论
在使用 CSS Reset 时，应注意该技术方法对网站扩容性和可维护性的影响。虽然 CSS Reset 可以减少不同浏览器之间的样式差异，但在过度使用的过程中会带来更多的问题。CSS Reset 仍然需要慎重使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752470c8bd460d3ad924537