在前端开发中，我们常常使用 CSS Reset 来重置浏览器默认样式，以达到跨浏览器的一致性。但是，使用默认的 CSS Reset 可能会带来边框样式异常的问题，本文将介绍该问题的原因和解决方案。
问题的表现
当使用 CSS Reset 并为元素添加边框样式时，该元素的边框可能会显示异常，如下图所示：
原本我们期望的效果应该是这样的：
问题的原因
出现这种问题的根本原因是 CSS Reset 让浏览器忘记了一些默认的样式信息，导致了在一些情况下无法渲染出我们期望的样式。
具体来说，这里涉及一个 CSS 样式的继承规则。浏览器默认会把 border-width 等边框样式继承给所有的子元素。但是 CSS Reset 会清除这个默认行为，并将所有元素的边框样式都设为 0，这样就使得那些依赖于继承的元素无法得到正确的样式信息。
解决方案
重置边框样式
首先我们可以尝试修改 CSS Reset 的样式，使其不会清除 border 等边框样式。下面是一些常用的 CSS Reset 样式及重置边框样式的方式。
Eric Meyer's Reset
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
对于该 Reset 样式，我们可以通过在自己的 CSS 文件中添加以下样式，对边框样式进行重置：
button, input, optgroup, select, textarea {
border: 1px solid #ccc;
border-radius: 4px;
}使用这种方式，我们就可以兼容绝大多数浏览器，并保留了边框样式。
Normalize.css
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------- ----- -- - -- -------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - -------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - --------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ----------- ---- -------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ------------ ------------ -- - -- -------- -- -- - -- ---------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------- ---------- ---------- -- - -- ----------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ------------------ ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - --------------- ----- -- - -- ----------------- ---------- -- - -- ----------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------- ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------- ---------- ---------- -- - -- ----------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ----------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ----------- ---- ------------- -- ---------- --------- ---------------- --------- - --- - -------- -------- - --- - ----- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - -------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------- -------- -- - -- ----------- ----- -- - -- ------------- ----- -- - -- -------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- ---------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- ---------------- ----- - --- - ------- --- --------- -- ----- ---- -------- -- --- --- ------- -- ------- ------ - ----------------- ----- -------------------- ----- - --- - ------ --- ----- ------ --- ------- -- -------- -- -------- - --------- -- -------------- ----- - --- - -- ------- --- ---- -------- -- ---- --- --- - -- ------- --- ----- ----------- ---- -------- -------- -- --- - -- ------ --- ------- -- ---------- --- --- ------ --- ---- ---- ---- --- - -------- -------- -- --- --------- -- ------ - --------- ------ ------------- ------- -- - -- ----------- ----- -- - -- ------- -------- -- - -- --------- -- -- - -- - --- - --- --- ------- -------- --------- -- ------- -------- --- ------ -- -------- - ---------------- --------- - --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - ---------- ----- - --- - -- --- --- ------- --- ------ -- -- --- - -- ------ --- ------- -- -- --- -- ------------------ -------------- - ------------ ----------- -- - -- --------- -- -- - -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - -------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - -------------------- ---------- -- - -- ---------------- ----- -- - -- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- ---------------------------------------------- ------------------------------------------ - -------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------ -------- -- - -- -------------------- ------- -- - -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - --------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - --------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - --------- ----- - --- - --- --- ------- ------- -- -- --- -- -------- - --------- ----- -
对于该 Reset 样式，我们可以通过在自己的 CSS 文件中添加以下样式，对边框样式进行重置：
button, input, optgroup, select, textarea {
border: 1px solid #ccc;
border-radius: 4px;
}针对性调整样式
当重置边框样式的方式无法解决问题时，我们可以尝试在特定元素上进行样式的针对性调整。下面是一些针对性调整的实践方法。
设置边框细度
部分浏览器在渲染边框时存在粗细不一的问题。我们可以在样式中为元素设置特定的 border-width 值，来修复这个问题。
border: 1px solid #ccc;
清除 margin 和 padding 的影响
部分元素在默认情况下存在 margin 和 padding 的影响，导致元素样式不符合预期。我们可以针对性地为特定元素清除 margin 和 padding，来修复这个问题。
button, input, optgroup, select, textarea {
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-radius: 4px;
}不使用继承样式
为了避免继承样式带来的问题，我们可以尝试使用非继承样式。
border-style: solid; border-width: 1px; border-color: #ccc;
使用这种方式，我们可以指定每个方向的边框样式，从而减少对继承样式的依赖。
使用第三方库
针对 CSS Reset 带来的样式异常问题，有些第三方库也提供了解决方案。比如，Bootstrap、Foundation 等前端框架，均对 CSS Reset 进行了针对性的改进并提供了边框样式的解决方案。
如果你使用了这些前端框架，可以直接使用它们提供的样式来解决边框样式的问题。
结语
通过本文的介绍，我们了解了 CSS Reset 带来的边框样式异常问题的原因，以及解决该问题的多种方式。在开发时，我们需要根据实际情况选择合适的解决方式，以确保网站的界面在不同浏览器下能够正常展示。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6792102b504e4ea9bd5e5cee