Question

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

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

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

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

Answer 2

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

例如，对于想要彼此齐平的图像或其他网格（如图库样式），行高可能确实存在问题。这通常是图像具有锚标记的情况，锚标记继承其父级的行高。规范允许＆＃34;正常＆＃34;值，但这似乎是每个浏览器不同的标准。 1或100％也是选项，但＆＃34; 0＆＃34;似乎基本上使所有浏览器都强制使用相同的标准，就像一个好的CSS重置。当然，所有文本都会被压缩到一行＃34; 0＆＃34;这就是为什么在内容区域设置行高是必要的。

Here's a codepen I put together to illustrate the point

Answer 3

我认为这是一个非常巧妙的想法。

但是，不要忘记，如果粗体/斜体文字太大，那么当只需要一条线时，所有线条都会很高，从而影响可读性。如果您的示例尚未处理它，您可能还需要处理上标和下标的内容。

Answer 4

我没有看到这种行为，但我正在使用WebKit。如果你在这个例子中抛出一些粗体标签，问题是否会发生？

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

Answer 5

这个帖子已经有好几年了，事情可能会在此期间发生变化，但以下（我在http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/上重新发现的）对我有用：

* {
  vertical-align: bottom; }

这是非常令人惊讶的，因为vertical-align因此似乎与line-height无关;再说一遍，这是CSS所以你永远不会知道。上面引用的网站实际上建议

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

对我来说看起来像是黑客。

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

5 个答案: