如何实现适当的CSS行高一致性 [英] How to achieve proper CSS line-height consistency
问题描述
我对 font-size 和 line-height 的基本CSS规则非常简单：
My basic CSS rule for font-size and line-height is pretty simple:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
}
当我创建一个包含<的段落时， em> 或< strong> （甚至是某些< code> 使用与< body> 不同的 font-size ），我注意到这些元素会增加行高
When I create a paragraph that contains an <em> or a <strong> (or even some <code> which uses a different font-size than the <body>), I notice that these elements increase the line-height by a pixel or two.
这使我相信大多数浏览器都采用最大内联元素来显示 line -高度。
This leads me to believe that most browsers take the largest inline element to display line-height. Is that right?
我的目标是使 line-height 保持一致，无论哪些元素是内联的。
My goal is to make the line-height consistent, regardless of which elements are inline.
我发现使 line-height 保持一致的唯一方法是定义：
The only way I've found to make the line-height consistent is to define:
em, strong, code, etc {
line-height: 100%;
}
这是正确的方法吗？还是我太过完美主义者？
Is this the right way to go about this? Or am I being too much of a perfectionist?
编辑1：
这似乎也可行：
em, strong, code, etc {
line-height: 1;
}
编辑2：
玩了几天之后，似乎没有一个可靠的解决方案来保持一致的 line-height 。如果有人有任何想法，我一定会喜欢的。
After playing with this for a few days, it doesn't appear that there is a reliable solution for keeping a consistent line-height. If anyone has any ideas, I'd certainly love to hear them.
编辑3：
为便于我将来参考和研究，这些标签应与 line-height：1 一起使用，只要它们与其他标签一起在线显示标准正文：
For my own future reference and from my own research, these tags should be considered with line-height: 1 as long as they are displayed inline along with other standard body text:
abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var
这些元素值得怀疑：
a, bdo, img, span
推荐答案
规范确认您的想法，即浏览器采用最大的字体进行行高计算。这意味着您唯一的选择（以及规范中提到的选择）是为您关心的行上的所有内联框设置行高。选择 body * 并设置字体大小的结果可能使您不满意。因此，在要统一显示的所有文本块周围添加具有相同类的一些Div，然后您就可以进行以下操作：
The spec confirms what you thought, that browsers take the largest font for the line-height calculation. That means your only option (and the one the spec mentions) is to set the line height for ALL the inline boxes on lines you care about. You probably would not be happy with the results of selecting body * and setting the font size. So add some Divs with the same class around whatever blocks of text you want to look uniform, and there you go:
div.uniformlines * {
line-height: 100%;
font-size: 16px;
}
这篇关于如何实现适当的CSS行高一致性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
