介绍
在编写 Web 界面的时候，我们经常使用 CSS Reset 来消除浏览器样式的默认差异。但是，有时候在使用 CSS Reset 后，我们会遇到水平滚动条的问题。这个问题一般是由于浏览器的默认样式被删除导致的。在这篇文章中，我们将探讨如何解决这个问题。
为什么会有水平滚动条？
在了解如何解决水平滚动条的问题之前，让我们先了解为什么会出现这种现象。
当浏览器渲染 HTML 页面时，它会给 HTML 元素和其他 DOM 元素添加一些默认样式。这些样式可能会包括边框、边距、填充、背景颜色等。但是，不同浏览器的默认样式是不一样的。这意味着在不同浏览器上，同一段代码可能会呈现出不同的效果。
为了解决这个问题，前端开发人员通常会使用 CSS Reset 这种技术，在页面开始的时候清除浏览器的默认样式，然后自己去定义所有元素的样式，强迫它们按照我们的设计进行呈现。但是，当你实现了 CSS Reset 后，你可能会发现页面出现了一些水平滚动条。这是因为我们已经删除了浏览器默认的水平滚动条，但是没有指定元素的宽度。
如何解决水平滚动条问题？
下面介绍两种常用的解决方法，供参考。
方法1：增加 box-sizing 属性
在 CSS Reset 中，我们一般会将所有元素的 padding 和 border 设为 0，这会导致元素的实际宽度变小，而这些元素的默认盒模型是 content-box，所以边框和填充将被添加到元素的宽度之外。为了解决这个问题，我们可以将盒模型修改为 border-box。
- - ----------- ----------- -
这个属性告诉浏览器将元素的宽度包括在 border 和 padding 内。这样，即使你删除了默认的填充和边框，元素的实际宽度仍然包括它们。这个方法可以避免元素宽度不足导致出现水平滚动条的问题。
方法2：禁用水平滚动条
另一种常见的解决方案是直接禁用水平滚动条。这个方法更为简单，但是可能会对一些特定的 UI 设计造成一些影响。
---- - ----------- ------- -
这个属性告诉浏览器不要显示水平滚动条。但是，你需要注意的是，如果你的内容宽度超过视口宽度，这个办法可能会限制页面内容的显示。
结论
水平滚动条的问题在使用 CSS Reset 后经常出现，但是它很容易解决。你可以通过增加 box-sizing 属性或禁用水平滚动条来解决这个问题。选择哪种方法取决于你的具体需求。最后，记得在实现其他 CSS 效果之前修复该问题，确保页面在不同浏览器上的兼容性。
示例代码
--------- -----
------
------
---------- ----- ----------
-------
- -
----------- -----------
------- --
-------- --
-
---- -
------------ -----------------
---------- -----
-
---------- -
------ -----
------- --- ----- -----
-
------- -
----------------- --------
------ -----
-------- -----
-
-------- -
-------- -----
-
--------
-------
------
---- ------------------
---- ---------------
------- ----- -------
------
---- ----------------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673313ba0bc820c58240644f