在进行前端页面开发的过程中，一般会采用 CSS Reset 来规范样式，以保证不同浏览器在展示页面时的表现一致。但是在使用 CSS Reset 时，我们可能会遇到 border 样式失效的问题，接下来我们讲解一下如何解决这个问题。
问题描述
在使用 CSS Reset 后，我们会发现一些元素的 border 样式会失效，例如 table 等元素。这是因为 CSS Reset 会把元素默认的 border 样式全部重置为0，而这些元素的 border 样式并不在 CSS Reset 的考虑范围内。
解决方法
方法一：手动设置 border 样式
我们可以手动为元素设置 border 样式，以覆盖 CSS Reset 中的默认设置。例如，对于 table 元素，我们可以设置其 border 样式为：
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
}这样就能够使 table 元素的边框显示出来。
方法二：使用 normalize.css
normalize.css 是一个针对不同浏览器的 CSS Reset 的跨浏览器样式库。与大多数 CSS Reset 不同的是，normalize.css 不会重置所有元素的样式，而是更加智能地重置一些常用元素的样式，同时保留一些有用的样式设置，避免了一些常见的浏览器兼容性问题。
/* 使用 normalize.css */ <head> <link rel="stylesheet" href="normalize.css"> </head>
通过使用 normalize.css，我们不仅可以避免 border 样式失效的问题，还可以解决许多其他浏览器兼容性问题。
总结
在 CSS Reset 中，border 样式失效是一个常见的问题。我们可以手动设置 border 样式，也可以使用 normalize.css。当然，不同的项目有着不同的需求，合理的选择方案则有助于更加高效地完成前端页面开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471d9cb968c7c53b0fc3c7c