前言
在 web 开发中，为了尽量解决浏览器间的兼容性问题和样式不统一的情况，一些第三方开发者已经开始发布各种 reset.css/reset.scss/reset.less/reset.stylus 。CSS Reset 是一种基础 CSS 样式文件，通常会被用于移除浏览器默认样式和提供一些基本的样式。本文将介绍 CSS Reset 的应用，以及常见问题的解决。
CSS Reset 的应用
Reset 的目的
由于不同浏览器对于标签默认的样式（margin/padding/border/font-weight 等）有差异，而且有些样式可能会影响到我们的布局和样式预期，所以我们会有必要对这些样式进行重置。
好处
- CSS Reset 可以消除浏览器之间的差异，达到更好的兼容性；
- 可以为后续的样式规则打下更好的基础；
- 可以简化浏览器默认样式带来的副作用和调试难度。
常见的 Reset
目前，常见的 Reset 有三种：
- Eric Meyer's Reset CSS
- Normalize.css
- reset.scss/reset.less/reset.stylus
Eric Meyer's Reset CSS
这个 Reset 是 Eric Meyer 在 2000 年提出的，是首个流行的 Reset，它将 HTML 标签的大部分 margin 和 padding 设置为 0，并重置了一些常用的元素样式。
这种 Reset 机制比较激进，影响力比较大，同时也能够更好地约束浏览器的默认样式，减少兼容性问题。但是，需要注意的是，它可能需要更多的样式才能达到我们预期的样式效果。
Normalize.css
Normalize.css 是一种比 Eric Meyer 的 Reset 机制更加温和的 Reset 方案，作者在保持浏览器默认样式的同时，修复了 HTML5 元素的一些常见问题。
Normalize.css 适合使用在大型项目中，它的实现比较简单，同时也可以达到基本要求，但需要注意的是，它可能会有一些细节小问题，需要自行处理。
reset.scss/reset.less/reset.stylus
这些项目来自 SASS/LESS/Stylus 的大型类库，是上述 Reset 机制的变体，可以根据自己的情况选择使用。
常见问题解决
在使用 CSS Reset 时，我们也会遇到一些问题，如 font 大小不一致、背景色消失等，接下来进行详细说明。
font 大小不一致
这是一个比较常见的问题，因为默认情况下不同浏览器使用的 font 大小不同，所以当 Reset CSS 隐藏了他们自己的默认 margin 和 padding 时，不同浏览器的 font 大小也可能变得不一致。
解决方案是，在Reset CSS 中设置 font-size 的值和 line-height 的值。通常情况下，font-size 会设置为14px，而 line-height 会设置为1.5，这样可以让我们的文本更易于阅读。
---- - ---------- ----- - ---- - ------------ ---- -
背景色消失
当我们使用 CSS Reset 时，常常会发现在某些浏览器中，背景色消失了。这是因为大多数 CSS Reset 库会将背景颜色设置为透明，从而导致我们定义的背景色不可见。
为了解决这个问题，我们需要在 CSS 中重新定义背景颜色：
---- - ----------------- ----- -
当然，需要根据自己的项目情况来决定是否需要重置这项样式。
button 样式问题
button 样式在使用 Reset CSS 时也存在许多问题。 Reset CSS 会使用 font-size 来跨浏览器解决 button 样式。
但在不同的浏览器中，button 的样式会发生巨大的变化，尤其是在移动设备上。因此，我们需要使用更多的 Reset 或自己的样式来重新定义 button 的样式。
------ - ----------------- ----- ------- --- ----- ----- -------------- ---- ------ ----- ------- -------- ---------- ----- -------- --- ----- -
结论
CSS Reset 在 web 开发中非常重要，但是它并不能完美解决样式兼容性问题。在使用 CSS Reset 时，我们需要考虑它的适用性，以及一些常见问题的解决方案。
同时，我们还需要注意给项目带来的影响， CSS Reset 的使用会消除浏览器差异，但会对页面性能造成一定影响，因此需要根据具体情况选择是否使用和使用何种 Reset 方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b6d159babaf620fab6790