为什么 HTML5 会忽略 line-height 小于 font-size？答案

【问题标题】：Why does HTML5 ignore line-height smaller than font-size?为什么 HTML5 会忽略 line-height 小于 font-size？
【发布时间】：2011-06-28 05:29:15
【问题描述】：

我正在将一些页面切换到 HTML5，其中包含需要设置为非常小的行高的标题。现在因为<!DOCTYPE html> 字体大小以下的任何行高都将被忽略。我可以随意将它们分开，但没有机会将它们拉得更近。有谁知道这是为什么以及是否可以治愈？
谢谢，托马斯

编辑：找到了。我的旧标记是 <a style="line-height:12px;" href="#">something</a>，它在 XHTML 1.0 过渡版中有效，但在 HTML5 中无效。
我将其更改为 <div style="line-height:12px;"><a href="#">something</a> 并且有效！
谢谢！

【问题讨论】：

您确定非 HTML5 文档类型不会触发相同的行为吗？
我很确定这也取决于浏览器，而不是 HTML5 的一般行为。
如何设置行高？（您使用的是哪种浏览器？）
一旦我删除 HTML5 Doctype（或将其替换为 XHTML 1.0 Transitional），我的 line-height 就会正确应用。它在样式表中指定，并在 Linux 和 Mac 上的 Chrome 和 Firefox 上进行了测试。

标签： html css

【解决方案1】：

您的 <a> 标记是一个内联元素，它出现在 HTML5 内联元素中，取决于其父“块”元素的行高（如果是直接父元素，则一直到 <body> 样式）。

例子：

body { line-height:20px; } 
a { line-height:12px; }

还有这个标记：

<body>
    <a href="#">test</a>
</body>

<a> 标签的行高为 20px 而不是 12px。

因此，您的“内联”<a style="line-height:12px;" href="#">something</a> 不起作用，但是当您将其包装在“块”级 <div> 元素中时起作用，因为块元素可以决定行高。

比通过将内联元素包装在块元素中来使标记膨胀更好的方法是，只需使用 CSS 使标记显示为“内联块”。

<a style="display:inline-block; line-height:12px;" href="#">something</a>

更好的是，给你的<a> 一个类（将下面的“xx”更改为语义）：

<a class="xx" href="#">something</a>

然后在你的 CSS 文件中将该类设置为“inline-block”：

.xx { display:inline-block; line-height:12px; }

希望对您有所帮助。

【讨论】：

一个非常好的收获。你能解释一下，为什么这个inline-height 小于父值时会被忽略，除非子元素有`displa：inline-block'？
我也很想知道，特别是因为它似乎并没有完全忽略它，只有当行高小于字体大小时。
这个答案今天帮助了我。谢谢！

【解决方案2】：

你有一些代码吗？是否有一些多余的填充或边距？

这在 Firefox、Chrome 和 IE8 中适用于我

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

【讨论】：

【解决方案3】：

在我的理解中，每个块级元素都有一个宽度为 0 的字符，称为“strut”。它将参与线框高度的计算。当children的line-height小于parent的时候，看起来children的line-height被忽略了，因为当children的line-height更小时，parent的line-height会撑起line box。

【讨论】：

【解决方案4】：

您需要使用 em 作为 IE8 中的大文本大小，IE7 不会共享相同的行高...例如使用 30px 字体大小：

这个例子表明，对于 30px 的文本大小，IE7 和 IE8 中的行高与 Chrome 和 FF 不同。

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

这个例子展示了使用 em 所有浏览器显示相同的行高。em 是一个旧系统，虽然我们需要使用它，直到 IE8 及以下版本消失。这是个好习惯。

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

【讨论】：