如何实现CSS行高度的一致性

我对

字体大小

和

行高

的基本CSS规则非常简单：

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

当我创建一个包含

或

的段落时（甚至一些

使用与
不同的
字体大小），我注意到这些元素会将行高增加一两个像素

这让我相信大多数浏览器都使用最大的内联元素来显示
行高度。是这样吗

我的目标是使
行高度一致，而不管哪些元素是内联的

我发现使
行高度一致的唯一方法是定义：

em, strong, code, etc {
    line-height: 100%;
}

这样做对吗？还是说我太完美主义了

编辑1:

这似乎也可行：

em, strong, code, etc {
    line-height: 1;
}

编辑2:

在玩了几天之后，似乎没有可靠的解决方案来保持一致的
线高度。如果有人有什么想法的话，我当然愿意听听

编辑3:

为了我自己将来的参考和我自己的研究，这些标签应考虑使用
行高：1
，只要它们与其他标准正文一起内联显示：

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var

这些因素值得怀疑：

a, bdo, img, span

我认为这是个很好的主意

但是，不要忘记，如果粗体/斜体文本太大，那么当只需要一行时，所有行都会变得非常高，从而影响可读性。如果您的示例还没有处理上标和下标，您可能还需要处理上标和下标。
我没有看到这种行为，但我正在使用WebKit。如果在本例中添加一些粗体标记，是否会出现问题

确认了您的想法，即浏览器采用最大字体计算行高。这意味着您唯一的选择（也是规范中提到的）是为您关心的行上的所有内联框设置行高。您可能不会满意选择
body*
并设置字体大小的结果。因此，在想要看起来统一的文本块周围添加一些具有相同类的div，就这样：

div.uniformlines * { 
    line-height: 100%;
    font-size: 16px;
}

定义
body{line height:0}
然后用
line height:1
或1.5或其他值定义主要内容区域的行高似乎是最好的，也是最灵活的。这允许您更动态、更一致地控制其他元素

例如，对于希望彼此对齐的图像或其他网格（如图库样式），线条高度可能会出现问题。当图像具有锚定标记时，通常会出现这种情况，锚定标记继承其父图像的线高度。规范允许“正常”值，但每个浏览器的标准似乎不同。1或100%也是选项，但“0”似乎基本上使所有浏览器强制使用相同的标准，如良好的CSS重置。当然，所有文本都会压缩到一行，并带有“0”，这就是为什么需要在内容区域设置行高的原因

此线程已经存在多年，在此期间可能会发生变化，但以下内容（我重新发现）对我有效：

* {
  vertical-align: bottom; }

这是非常令人惊讶的，因为
垂直对齐
似乎与
线高度
无关；再说一遍，这是CSS，所以你永远不会知道。上面引用的网站实际上表明

sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  position: relative; }

对我来说，这看起来像是一个骇客。
oooooo是的，现在正在做sub和sup，但准备放弃了。哈哈，回到这里，我觉得我贴的东西不对。将行高设置为100%并不能保持一致性-文本较大的行较大，但后续行会恢复正常。您将行高设置为0的示例使所有行保持其原始高度-在这种情况下，您需要确保较大的文本不会与其他行重叠。是的，确实如此（FF 3.0.x）。我现在正在处理这个问题，似乎没有一个友好的解决方案。非常好的信息！那么
p*{line height:0；}
，或者更好的是
pa，p code，p big{line height:0；}
？现在我们有进展了<代码>；）我最后一条评论的后续内容。小心我上面的代码。例如，如果您有
，线高度将计算为零，这可能不是您想要的。