在进行前端开发的过程中，我们经常会遇到不同浏览器对页面样式的渲染不一致的问题。为了解决这个问题，我们通常会使用 CSS Reset 来消除浏览器默认样式，然后重新定义页面的样式。但是在实际的开发中，我们也经常会遇到一些关于 CSS Reset 的错误问题，下面就来详细介绍这些问题并进行排查。
什么是 CSS Reset？
CSS Reset 是一种技术手段，它的主要功能是通过消除浏览器的默认样式，让元素在各大浏览器中显示效果一致。CSS Reset的原理是通过定义一些全局样式，将所有的浏览器默认样式重置为统一的值，以达到浏览器兼容的目的。
比如我们常用的 reset.css 代码如下：
-- -------------------- ---- ------- -- --------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - -------- -- --------- -- -------- -- ----------- ----- ------ -------- ---------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - --------- ------ - ---- - ------------- -- - --- -- - ------------ ----- - ----------- - - -------- ----- - ------------------ ----------------- --------- ------- - --------- --- --------- ----- - ----- - ----------------- --------- ---------------- -- -
常见的 CSS Reset 错误问题
1. 重置后样式问题
虽然 CSS Reset 能够消除浏览器默认样式，但是如果我们对 CSS Reset 的样式理解不够透彻，在重新定义样式之前，可能会出现样式不生效的问题，比如重置后形如下面这样的样式：
a {
color: #ccc;
}
a:hover {
color: #333;
}这段样式意图是给所有的链接都定义一个灰色的颜色，同时在链接被鼠标悬停时颜色变为 #333。但是，由于在 CSS Reset 中已经将链接的样式进行了重置，如果此时不重新定义 a 标签的样式，那么可能会出现链接不变色的问题。
解决方法：重新定义 a 标签的样式。
a {
color: #ccc;
}
a:hover {
color: #333;
}2. 失败原因分析
有时候我们在进行样式重置时，可能会发现样式并没有按照我们预期的效果进行重置，这时我们需要对重置失败的原因进行分析。
答案一：CSS Reset 代码被覆盖
在前端开发的过程中，我们通常会使用其他 CSS 文件来设置样式，如果此时在这些样式文件中对 CSS Reset 中重置的样式进行了重新定义，那么这些样式就会被现有样式所覆盖，从而出现失效的问题。
解决方法：按照原有的行内样式编写，以确保样式不被覆盖。
答案二：未重置部分未覆盖
有时候，我们可能会遗漏一些样式，导致这些未被重置的样式在后面的使用中出现了问题。
解决方法：检查是否遗漏了某些需要重置的样式。
3. 样式被继承
CSS Reset 在对样式进行重置时，实际上是对浏览器的默认样式进行重置，但并没有重置来自外部文件的、内联样式的样式表的所有样式，所以我们需要注意到不一定所有的样式都会被重置或更新。
有时候我们在使用样式时会发现对于同一种样式设置，它的实际样式却不同，原因就在于某些继承样式的问题。
解决方法：使用 !important 标记来强制样式。
body {
background-color: #fff !important;
}结论
在实际的开发过程中，我们需要使用 CSS Reset 来进行样式的统一处理，但是在使用 CSS Reset 时，我们还需要注意到其附带的问题，并且需要对重置失败进行必要的分析和调试，以保证样式的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67178281ad1e889fe221d88f