提问人：Jeff 提问时间：10/12/2009 最后编辑：ЯegDwightJeff 更新时间：11/25/2022 访问量：19493
如何实现适当的 CSS 行高一致性
How to achieve proper CSS line-height consistency
问：
我的基本 CSS 规则非常简单：font-sizeline-height
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
}
当我创建一个包含 a 或 a（甚至有些段落使用与 不同的段落）时，我注意到这些元素将行高增加了一两个像素。<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
答：
0赞
DisgruntledGoat
10/12/2009
#1
我认为这是一个非常巧妙的想法。
但是，不要忘记，如果粗体/斜体文本太大，那么当只需要一行时，您可能会使所有行都非常高，从而损害可读性。你可能还需要一些东西来处理上标和下标，如果你的示例还没有处理它。
评论
0赞
Jeff
10/13/2009
噢，是的，现在正在研究 sub 和 sup，但即将放弃。不。
0赞
DisgruntledGoat
10/13/2009
嗯，刚刚回到这个，我认为我发布的内容是不对的。将行高设置为 100% 并不能保持一致 - 文本较大的行较大，但后续行会恢复正常。将行高设置为 0 的示例将所有行保持其原始高度 - 在这种情况下，您需要确保较大的文本不会与其他行重叠。
0赞
Azeem.Butt
10/13/2009
#2
我没有看到这种行为，但我正在使用 WebKit。如果你在这个例子中加入一些粗体标签，你会遇到问题吗？
http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height
评论
0赞
Jeff
10/14/2009
是的，它确实如此（FF 3.0.x）。我现在正在研究这个问题，似乎没有一个友好的解决方案。
7赞
WillfulWizard
10/14/2009
#3
该规范证实了您的想法，即浏览器采用最大的字体进行行高计算。这意味着您唯一的选择（以及规范中提到的那个）是设置您关心的行上所有内联框的行高。您可能不会对选择和设置字体大小的结果感到满意。因此，在你想要看起来统一的任何文本块周围添加一些具有相同类的 Div，然后就可以了：body *
div.uniformlines * {
line-height: 100%;
font-size: 16px;
}
评论
0赞
Jeff
10/14/2009
很棒的信息！怎么样，或者更好的是？现在我们到达了某个地方。p * { line-height: 0; }p a, p code, p big { line-height: 0; };)
0赞
Jeff
10/14/2009
跟进我上次的评论。小心我上面的代码。例如，如果您有 ，则行高将计算为零，这可能不是您想要的。<p><a href="#">foo</a></p>
2赞
Matt Cromwell
7/19/2014
#4
用 1.5 或其他值定义主要内容区域的行高似乎是最好和最灵活的。这使您可以更动态、更一致地控制其他元素。body {line-height: 0}line-height: 1
例如，对于图像或其他想要彼此齐平的网格（如画廊样式）来说，行高可能确实存在问题。当图像具有锚标记时，最常见的情况是，锚标记继承了其父标记的行高。该规范允许一个“正常”值，但这似乎是每个浏览器的不同标准。1 或 100% 也是选项，但“0”似乎基本上使所有浏览器都强制使用相同的标准，就像一个好的 CSS 重置一样。当然，所有文本都会被压缩到一行带有“0”的行，这就是为什么有必要在内容区域设置行高的原因。
2赞
flow
1/21/2015
#5
这个线程已经有好几年的历史了，在此期间情况可能已经发生了变化，但以下内容（我在 http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/（存档）上重新发现）对我有用：
* {
vertical-align: bottom; }
这是相当令人惊讶的，因为这样似乎与;话又说回来，这是CSS，所以你永远不知道。上面引用的网站实际上表明vertical-alignline-height
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative; }
这对我来说看起来像是一个黑客。
评论