随着现代浏览器的不断发展，前端开发人员通常会使用一些 CSS Reset 的库来消除不同浏览器之间的样式差异，例如 Normalize.css 和 Reset.css。在大多数情况下，这些库可以顺利地完成这项任务。然而，在 IE 浏览器中操作时，往往会出现一些行间距问题。在本文中，我们将研究这些问题并探讨如何解决它们。
问题背景
在大多数情况下，浏览器会在文本元素的字母之间以及单词之间加上一些间距。这个间距被称为行间距。 行间距的大小取决于许多因素，包括元素字体的大小，行高等等。 当我们在 CSS 中使用一些 Reset 样式来重置这些样式时，我们偶尔会弄错一些属性，这些属性会导致 IE 浏览器中的行间距出现问题。
在 IE 中，我们经常遇到的一个问题是行高（line-height）不能被重置，这通常导致元素之间的不必要的空隙，这些空隙的大小可能是一些像素，但足以显眼。
以下是该问题的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- --- ----- ------------- ----- ----- ----------- --- ------ ---------------- -------------------------------------------------------------------------------- ------ ---------------- ---------------------------------------------------------------------------- ------- ---------------- ---- - ------------- ----- --------------- -- ----------------- ----- -------------------- ----- ----------- ----- --- --- - ------------- ----- --------------- -- -------------------- ----- ----------- ----- ----------------- ----- ----- --------- ------- ------ ------- --- ----- ---------- --------- ----- ----- --- ----- ----------- ---------- ----- --- -------- ------ --- ------- -------------- --------------- --- ---- ----- --------- --------- ------ --- ------ ---------- ------------ ------- --- --- ------ ------ ---------------- ------- -------
在大多数现代浏览器中，这个示例代码的渲染效果可能是这样的：
然而，当我们在 IE 中运行示例代码时，我们会发现以下结果：
解决方案
使用 Universal Selector 修正行高
解决该问题的一种方法是使用通用选择器（Universal Selector）来手动覆盖掉之前的行高。例如：
* {
line-height: normal;
}这条规则将覆盖所有元素的行高，防止其意外地继承之前的值。这是一种快速并且有效的解决方法，但是在大型项目中使用可能会影响性能。
使用负的 margin 或 padding
另一种解决方法是使用负的 margin 或 padding。它的思想是通过向上移动元素的底部来消除之前行高引起的影响。例如，在我们的示例代码中，可以使用以下样式来修改 P 标签：
p {
margin-top: -1px;
padding-top: 1px;
}使用该样式后，我们的示例代码在 IE 中将效果如下：
使用 CSS hacks
最后一种解决办法是使用 CSS hacks。 CSS Hacks 是一些可以在特定浏览器中指定特定样式的 CSS 代码。 它对样式表的可读性产生了一些损害，但是为特定问题提供了最有效的解决方案。例如，在我们的示例代码中，可以通过以下样式来解决 IE 行高问题：
-- -------------------- ---- -------
-- --- --- -------- -- -- --
------ ------ --- ------------------- -------- ------------------- ----- -
-- ----------- --- ---- --
-- -
------------ ------ -----------
-
- -
------------ ------ -----------
-------------- --
-
-这种方法可能不是很理想，因为它需要一些额外的工作来维护和更新 CSS hacks，并且随着浏览器的更新，CSS hacks 可能会变得无效。 这里仅提供给大家了解。
结论
CSS Reset 是解决现代 Web 设计中编写一致且跨浏览器兼容 CSS 的关键组件之一。 但是，在特定的情况下，可能会发现一些问题，特别是在 IE 浏览器中。 通过本文我们了解到，在 IE 下 CSS Reset 引起的行间距问题有不同的解决方法，包括使用通用选择器、负 margin 或者使用 CSS hacks 等方式。 不过，在决定如何使用 CSS Reset 时，始终要记住，清楚地了解每个项目的实际要求和可能的浏览器限制是至关重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6712fd54ad1e889fe209a60d