在前端开发中，我们经常会使用 CSS Reset 来重置浏览器默认的样式，以达到更好的页面布局和样式控制效果。然而，有时候我们会发现，经过 CSS Reset 处理后，原本应该显示的边框却不见了，或者显示不正常。这是因为 CSS Reset 中对边框样式的处理不当所导致的问题。本文将介绍如何彻底解决这个问题。
问题的原因
CSS Reset 通常会将所有元素的边框样式设置为 0，以便更好地控制页面布局和样式。但是，有些元素的边框样式是需要显示的，比如表格、表单、图片等。如果在 CSS Reset 中没有对这些元素的边框样式进行特殊处理，就会导致边框不显示或者显示不正常的问题。
举个例子，下面是一个简单的 HTML 表格：
<table>
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</table>如果我们在 CSS Reset 中将所有元素的边框样式设置为 0，比如：
* {
margin: 0;
padding: 0;
border: 0;
}那么这个表格的边框就会不见了。这是因为表格的边框样式是通过 CSS 属性 border-collapse 和 border-spacing 来设置的。而在 CSS Reset 中，这两个属性通常也会被设置为 0，导致表格边框不显示。
解决方案
为了解决 CSS Reset 导致的边框不显示问题，我们需要对特定元素的边框样式进行特殊处理。具体来说，我们需要为表格、表单、图片等元素设置合适的边框样式，以保证它们能够正常显示。
表格边框
对于表格，我们可以通过设置 border-collapse 和 border-spacing 属性来控制其边框样式。具体来说，我们可以将 border-collapse 设置为 collapse，将 border-spacing 设置为一个合适的值，比如：
// javascriptcn.com 代码示例
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
}上面的代码将表格的边框样式设置为 1 像素的实线边框，内边距为 5 像素。这样，即使在 CSS Reset 中将所有元素的边框样式设置为 0，表格的边框也能够正常显示。
表单边框
对于表单，我们可以通过设置 border 属性来控制其边框样式。具体来说，我们可以将表单元素的 border 属性设置为一个合适的值，比如：
input, select, textarea {
border: 1px solid #ccc;
padding: 5px;
}上面的代码将表单元素的边框样式设置为 1 像素的实线边框，内边距为 5 像素。这样，即使在 CSS Reset 中将所有元素的边框样式设置为 0，表单元素的边框也能够正常显示。
图片边框
对于图片，我们可以通过设置 border 属性来控制其边框样式。具体来说，我们可以将图片的 border 属性设置为一个合适的值，比如：
img {
border: 1px solid #ccc;
}上面的代码将图片的边框样式设置为 1 像素的实线边框。这样，即使在 CSS Reset 中将所有元素的边框样式设置为 0，图片的边框也能够正常显示。
总结
通过对表格、表单、图片等元素的边框样式进行特殊处理，我们可以彻底解决 CSS Reset 导致的边框不显示问题。在实际开发中，我们需要根据页面需求和设计要求来设置合适的边框样式，以保证页面的美观和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587b78beb4cecbf2dcf84c4