如何实现正确的CSS行高一致性

Question

我的基本的CSS规则font-size和line-height非常简单:

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

当我创建包含一个段落的<em>或<strong>(或者甚至一些<code>其使用不同的font-size比<body>),我注意到,这些元件由一个或两个像素增加行高.

这让我相信大多数浏览器都会使用最大的内联元素来显示line-height.是对的吗？

我的目标是使line-height一致,无论哪些元素是内联的.

我发现line-height保持一致的唯一方法是定义:

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

这是正确的方法吗？或者我是一个完美主义者？

编辑1:

这似乎也有效:

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

编辑2:

在玩了几天后,似乎没有一个可靠的解决方案来保持一致line-height.如果有人有任何想法,我当然喜欢听他们.

编辑3:

对于我自己将来的参考和我自己的研究,line-height: 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

Answer 1

该规范确认了您的想法,浏览器采用最大字体进行行高计算.这意味着您唯一的选择(以及规范提到的选项)是为您关注的行上的所有内联框设置行高.您可能不会对选择body *和设置字体大小的结果感到满意.所以在你希望看起来一致的文本块周围添加一些具有相同类的Div,然后你去:

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