什么是 CSS Reset
CSS Reset 是一种优化样式表的方法，目的是尽可能清除浏览器默认的样式，使不同浏览器之间呈现的页面样式更加一致。通常情况下，为了减少某些样式的浏览器兼容问题，我们都会引入 CSS Reset。
为什么会引起问题
在引入 CSS Reset 的过程中，可能会出现样式紊乱或浏览器兼容问题。这是因为在清除浏览器默认样式的同时，CSS Reset 也移除了某些有用的默认样式，导致布局错乱或者元素不可用。
比方说，我们在使用 CSS Reset 时可能会发现表单元素的样式和排版失灵了，这时候需要重新设定表单元素的 CSS 样式，使其符合我们的排版规范。
如何解决问题
1. 精益求精
在引入 CSS Reset 前，我们应该先确定工程上是否需要，如果需要则使用较为轻量的 CSS Reset。通常情况下，我们并不需要将所有的默认样式清空。这时候，我们可以采用 normalize.css 或者 reset.css 等较为流行的轻量级 CSS Reset。
可以使用以下命令快速安装 normalize.css：
npm install --save normalize.css
然后，在项目中引入该 CSS 文件：
<link rel="stylesheet" href="normalize.css">
normalize.css 解决了一些常见的浏览器兼容性问题，并且添加了一些有用的默认样式，例如 input 类型的标注、线性渐变和页面元素的排版等等。
如果你还有其他选择和需要，也可以寻找其他 CSS Reset 方案。
2. 重设样式
在引入 CSS Reset 后，我们可以重新设定每个元素的 CSS 样式，使其符合我们的布局规范。这将有助于消除 CSS Reset 带来的负面影响。
例如，在重设表单元素的样式时，我们可以使用以下 CSS 样式：
input, select {
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: white;
}这将使表单元素的边框、背景、字体大小和颜色与其他元素的样式保持一致，达到了我们期望的效果。
3. 监听事件
在使用 CSS Reset 的过程中，我们可能也需要在代码中监听事件，以确保页面元素在清除默认样式后正确的呈现和触发事件。
例如，我们可以使用以下代码监听按钮点击事件：
$("button").click(function(){
// perform some action here
});这将确保按钮在清除默认样式后仍可以成功地触发单击事件。使用类似的事件监听器，我们可以确保页面元素在使用 CSS Reset 后符合预期的样式和交互效果。
总结
CSS Reset 是一种优化页面样式的方法，可以清除浏览器默认样式，使页面在不同的浏览器中呈现更加一致。然而，在使用 CSS Reset 的过程中，我们也需要考虑它会引起的问题。为了解决这些问题，我们可以选择较为轻量的 CSS Reset，重新设定每个元素的 CSS 样式，以及监听相应的事件。在实际使用 CSS Reset 时，我们需要权衡利弊，根据实际情况和需求选择合适的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64509c97980a9b385b997ff9