在前端开发中，为了确保页面在不同浏览器中的显示效果一致，我们通常会使用 CSS Reset 来重置元素的默认样式。其中一个重要的属性是 line-height，它决定了文字的行高，但是不同的浏览器对于默认 line-height 值的定义有所不同，因此我们需要特别关注如何设置合理的 line-height 值。
line-height 值的影响
line-height 值决定了文字的行高，它可以影响到许多方面，如文字的排版、行距、行高等。如果我们在设置 line-height 值的时候出现了问题，会导致文字排版不美观或者不易阅读。
例如，如果设置的 line-height 值过小，会导致文字之间的行距太小，不方便阅读。如果设置的 line-height 值过大，会导致行距过大，造成空间浪费、排版不紧凑，同时也可能不易阅读。
因此，我们需要在设置 line-height 值的时候谨慎考虑，根据实际需求合理地进行设置。
CSS Reset 中的 line-height 值
在 CSS Reset 中，我们通常会将 line-height 设置为 1，这个值被认为是最佳的 line-height 值，因为它可以确保文字的行距、排版以及行高等都处于一个合理的范围内。
但是，由于不同浏览器对于 line-height 的默认值定义不同，即使是设置为 1，不同浏览器下的表现也会不同。因此，我们需要进一步了解不同浏览器对 line-height 值的默认定义。
不同浏览器对 line-height 值的默认值定义
在进行 CSS Reset 前，我们需要先了解不同浏览器对 line-height 值的默认值定义，以此来确保重置后的 line-height 值符合我们的预期。
WebKit 内核浏览器（Chrome、Safari）
在 WebKit 内核浏览器中，line-height 的默认值为 normal，它等于元素的字体大小。因此，如果我们在设置 line-height 的时候使用默认值 normal，其实就相当于给元素设置了一个 line-height 值等于字体大小的样式。
Firefox 浏览器
在 Firefox 浏览器中，line-height 的默认值为 -moz-block-height。这个值与元素的 font-size 和 font-family 有关，从而确定了元素的行高。一般来说，它的值与 WebKit 浏览器中 normal 值的相同。
IE 浏览器
在 IE 浏览器中，line-height 的默认值是计算值，它等于元素的字体大小的百分比。具体来说，在 IE 浏览器中计算 line-height 值的公式为：
line-height = font-size + 2 × font-size × 0.5 × (line-height - 1)
其中 line-height 是设置的值，font-size 是元素的字体大小。在这个公式中，如果我们设置 line-height 值为 1，那么实际上元素的 line-height 值会等于字体大小的 100%。
如何进行重置
基于上述的浏览器对 line-height 值默认值的不同定义，我们可以得出以下的 line-height 重置方案：
-- -------------------- ---- ------- - - ------- -- -------- -- ------------ -- - ---- - ------------ ------- -
在这个方案中，我们首先将所有元素的 line-height 值设置为 1，以此来保证元素的行距、排版以及行高等都处于一个合理的范围内。同时，我们也将 body 元素的 line-height 值设置为 normal，以保证整个页面的行距、排版以及行高等都符合预期。
结论
在前端开发中，line-height 值是重要的样式属性之一。通过上述的介绍，我们可以了解到不同浏览器对 line-height 值的默认值定义不同，因此我们需要在进行 CSS Reset 时特别关注。同时，选择合理的 line-height 值也是保证页面展示效果的重要因素之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747dad85883fc5ebfe61543