什么是 CSS Reset？
CSS Reset 是一种用来重置浏览器默认样式的 CSS 文件。由于不同浏览器对于 HTML 元素的默认样式有所不同，所以使用 CSS Reset 可以使不同浏览器之间元素的样式表现更加一致。
CSS Reset 对元素高度的影响
CSS Reset 可以将元素的默认样式全部清除，但是这也会导致一些问题。其中一个问题就是元素的高度可能会失效，这是因为默认样式中包含了一些与元素高度相关的属性，如 line-height 和 font-size。
下面是一个示例代码：
--------- -----
------
------
----- ----------------
---------- -------------
----- ---------------- -----------------
-------
---- -
----------------- -----
------- ------
------------ ------
----------- -------
-
--------
-------
------
---- ----------------- -----------
-------
--------- --------- -- - - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
在上面的代码中，我们使用了一个 CSS Reset 文件，并且给一个 div 元素设置了高度和行高。但是，由于 reset.css 文件中将所有元素的字体大小设置为了 100%，这导致了元素的行高失效，从而使元素的高度也失效了。
解决方法
解决这个问题的方法很简单，我们只需要在 CSS Reset 文件中加入以下代码即可：
---- - ---------- ----- ------------ ---- -
这段代码会将 html 元素的字体大小和行高设置为一个合理的值，从而使元素的高度恢复正常。
另外，我们也可以在自己的样式文件中重新设置元素的字体大小和行高，这样也可以解决这个问题。例如：
---- - ---------- ----- ------------ ---- ------- ------ ----------- ------- -
总结
CSS Reset 是一个非常有用的工具，可以帮助我们解决浏览器兼容性的问题。但是，在使用 CSS Reset 的过程中，我们也需要注意一些细节，例如元素高度失效的问题。通过本文介绍的方法，我们可以轻松地解决这个问题，使我们的网页在不同浏览器中都能够正常显示。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6589562beb4cecbf2de9e2fb