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

我对font-size和line-height基本的CSS规则很简单：如何实现正确的CSS行高度一致性

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

当我创建一个包含<em>或<strong>一个段落（甚至一些<code>它使用与<body>不同的font-size），我注意到这些元素将行高增加了一个或两个像素。

这使我相信，大多数浏览器采取最大内联元素显示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

来源

2009-10-12 Jeff

的spec确认你在想什么，是浏览器采取的行高度计算的最大字体。这意味着您唯一的选择（以及规格中提到的一个选项）是为您关心的所有行上的所有内联框设置行高。您可能不喜欢选择body *并设置字体大小的结果。所以加一些div周围，你想看看均匀任何文本块的同一个班级，和你去那里：

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

来源

2009-10-13 17:26:03 WillfulWizard

优秀信息！那么'p * {line-height：0; }'，或者更好，也许'p a，p代码，p大{line-height：0; }'？现在我们正在某个地方。 ';）' – Jeff 2009-10-13 17:40:37

后续到我最后的评论。上面的代码要小心。例如，如果您有'

foo

'，则行高将计算为零，这可能不是您想要的。 – Jeff 2009-10-13 18:21:18

我认为这是一个非常ñ吃点想法。

但是，不要忘记，如果粗体/斜体文本太大，那么只有在需要时才会使所有线条变得很高，从而损害可读性。如果您的示例尚未处理，您可能还需要处理上标和下标。

来源

2009-10-12 15:58:17 DisgruntledGoat

Ooooo是啊，现在在sub和sup上工作，但是准备放弃。大声笑 – Jeff 2009-10-12 16:05:11

嗯，刚刚回来，我不认为我发布的是正确的。将行高设置为100％不会保持一致 - 文字较大的行较大，但后续行会恢复正常。将行高设置为0的示例将所有行保持为原始高度 - 在这种情况下，您需要确保较大的文本不与其他行重叠。 – DisgruntledGoat 2009-10-12 18:09:23

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

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

来源

2009-10-13 10:16:52

是的，它确实（FF 3.0.x）。我现在正在处理这个问题，似乎没有一个友好的解决方案。 – Jeff 2009-10-13 17:19:11

看来最好的和最灵活的定义body {line-height: 0}然后定义行高为主要内容的区域与line-height: 1或1.5或其他。这使您可以更加动态和一致地控制其他元素。

例如，线条高度对于图像或其他希望彼此齐平的网格（如图库风格）来说可能确实存在问题。当图像具有锚定标记时，这通常是这种情况，它会继承其父级的行高。该规范允许“正常”的值，但这似乎是每个浏览器的不同标准。 1或100％也是选项，但“0”似乎基本上使所有浏览器强制执行相同的标准，就像一个好的CSS重置。当然，所有的文本都被挤压成一行“0”，这就是为什么在内容区域设置行高是必要的。

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

来源

2014-07-18 18:25:54

此线程已岁事情都有可能在此期间已经改变，但以下（这是我重新找回了上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; }

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

来源

2015-01-21 05:12:07 flow

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

回答

相关问题