简介
在前端页面开发的过程中，通常会使用 CSS Reset 来消除不同浏览器之间的默认样式不同的问题，以达到统一样式的效果。不过，CSS Reset 在消除浏览器默认样式的同时也可能会引起一些 bug。
本文将通过实例讲解 CSS Reset 引起的 bug 及其解决方法，让读者更加深入理解 CSS Reset 的原理及应用。
CSS Reset
CSS Reset 是为了解决不同浏览器之间的样式差异而产生的一种方案。在使用 CSS Reset 时，我们会先将页面的所有元素的 margin、padding、border 等属性全部设置为 0 或者设为一个相同的值，以达到页面元素的统一样式。例如以下是一个简单的 CSS Reset：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}但是，CSS Reset 会给开发中引入一些隐藏的 bug，接下来我们就来讲解：
CSS Reset 引起的 bug
文字排版问题
CSS Reset 实质上是一种重置样式，它重置了页面中的大部分元素，而这些元素中有一些是文字，例如 a 标签、p 标签、ul 标签等等。这些元素本身的样式与其默认的文字样式有关。
在重置了上述元素后，我们通常会自己重新定义文字的字体、大小、颜色、行高等属性。而在这个过程中，可能会遗漏一些不常见的元素，从而使页面的文字排版问题出现 bug。
比如，下面这个例子中，在使用 CSS Reset 后增加了一个 <small> 标签，虽然设置了高度和行高，但是由于将元素的 font-size 设置为 100%，所以最终导致 <small> 的文字大小仍然是默认值，但是高度却变成了我们手动设置的值。
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - ------ - --------------------- ------------ ----------------- --------------- - --- ------ --------------------------------
会员中心的样式问题
当我们使用 CSS Reset 时，如果已有的页面结构没有完全契合 CSS Reset 的规范，可能会造成样式的混乱问题。特别是在会员中心，由于时间和经费的限制使得大多数公司很难去完全梳理结构问题。
举例来说，下面这个例子中，当我们在 CSS Reset 后定义 a 标签的 hover 样式时，发现会员中心的所有按钮文字（即 a 标签）被 hover 时都会发生样式改变，而不是只有指定的按钮才会发生样式改变。
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - ------- - ------ -------- - --- -- ----------------- ---------------------
表单样式问题
在表单样式中，CSS Reset 能够帮助我们消除浏览器之间的差异。然而，由于 CSS Reset 消除样式时，可能会影响一些表单样式，从而导致表单样式出现 bug。比如下面这个例子，在 HTML 代码中已经设置了一个包含多个输入框的表单，但是在使用了 CSS Reset 后，我们发现输入框的边框被神奇地消失了。
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - --- ------ ------ ------------ ------ ------------ ------ ------------ ------ ------------ -------
CSS Reset 的解决方法
文字排版问题
解决方法很简单：在 CSS Reset 的样式之后，重新定义页面中所有文字相关的样式。例如，下面这个例子中重新定义了 <small> 标签的文字大小。
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - ------ - --------------------- ------------ ----------------- - ------- ------ -- ------ ----- - - --------------- - --- ------ --------------------------------
会员中心的样式问题
解决会员中心的样式问题有两种方法。一种是将所有属于会员中心的样式都包裹在一个固定的 id 中，然后在 CSS Reset 的样式之后加上相应的id 样式。例如以下这个例子，在 #member-center 中定义了会员中心的所有样式，然后在 CSS Reset 样式下面加上了一个 #member-center 样式。
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - -------------- ------- - ------ -------- - --- ---- ------------------- -- ----------------- --------------------- ------
另一种方法则是使用 SCSS 等 CSS 预处理器来区分样式，这种方法需要一定的预处理器基础。
表单样式问题
解决表单样式问题的方法也很简单：重新定义表单样式。例如，下面这个例子在 CSS Reset 的样式之后重新定义了输入框的边框。
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - ------------------ - ---------- ----- ----- - --- ------ ------ ------------ ------ ------------ ------ ------------ ------ ------------ -------
总结
CSS Reset 是一种很好的解决浏览器默认样式的方案，但是在使用 CSS Reset 的过程中，也需要注意潜在的样式 bug。因此，使用 CSS Reset 时，需要谨慎地操作，同时也需要对可能出现的 bug 做好准备和解决方案。
注意：文章中的所有解决方法都是举例，具体问题具体分析，使用前需要自己进行调整。
参考：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e88a995b1f8cacd636f89