前言
众所周知，各个浏览器对 HTML 和 CSS 的支持的差异很大，导致同一份代码在不同的浏览器中呈现的效果也不相同。为解决这个问题，许多开发者选择使用 CSS Reset 来规范浏览器的默认样式。然而，使用 CSS Reset 也会引起元素边框样式异常问题，下面我们来详细探讨一下。
问题描述
在使用 CSS Reset 后，我们往往会发现，某些元素的边框样式与我们所期望的不同。例如，在一个列表中，我们设置了每个列表项的边框为 1px 的黑色实线，但实际上它们的边框却有变化：
出现该问题的原因是浏览器默认样式的存在。我们以 Chrome 浏览器为例，可以通过检查元素样式来发现默认样式所影响的代码行：
由此可知，浏览器在默认情况下为元素设置了一个 2px 的固定边框，同时还有一些内边距和 margin。而在使用 CSS Reset 后，这些默认样式被取消了，导致边框样式异常。
解决方案
解决这个问题的方法有很多，我们下面介绍两种常用的方法。
方法一：使用 border-box 盒模型
传统的盒模型是 content-box，它将元素的整体宽度包括了 content、padding、border 和 margin 四个部分，而 content 的宽度是单独计算的。
而使用 border-box 盒模型，则将 border 和 padding 的值算入 content 宽度中，从而使整体宽度不会发生变化。
我们可以在全局样式中为元素统一使用 border-box 盒模型：
- - ----------- ----------- -
这样，在元素设置边框的时候，边框的宽度就不会影响元素的整体宽度了，也就不会出现意外的变化了。
方法二：再次为元素设置边框样式
如果我们不想使用 border-box 盒模型 或 能为某些元素重写边框样式，我们可以为这些元素再次设置边框样式。例如，我们在列表样式中再次为列表项设置边框样式：
-- - ----------- ----- ------- -- -------- -- - -- - ------- --- ----- ----- -
这样，我们就再次为列表项设置了边框样式，不受浏览器默认样式和 CSS Reset 的干扰了。
总结
在前端开发中，使用 CSS Reset 是一种规范化代码的好习惯，但也可能会引起一些意外问题。通过使用 border-box 盒模型或再次设置边框样式，我们可以解决 CSS Reset 引起的元素边框样式异常问题。当然，这并不是唯一的解决方法，大家可以根据实际情况进行选择。
代码示例：https://codepen.io/sea-eagle/pen/xxqYMEO
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6496d39648841e9894406ca5