为什么HTML5忽略小于字体大小的行高？

我将一些页面切换到HTML5，其中包含需要设置一个非常小的行高的标题。现在自<!DOCTYPE html>以后，字体大小以下的任何行高都被忽略。我可以将它们全部分开，但没有机会将它们放在一起。任何人都知道这是为什么，如果它是可治愈的？
谢谢，托马斯为什么HTML5忽略小于字体大小的行高？

编辑：找到它。我的旧标记是<a style="line-height:12px;" href="#">something</a>，它使用XHTML 1.0过渡，但不使用HTML5。
我把它改为<div style="line-height:12px;"><a href="#">something</a>一个有效！
谢谢！

来源

2011-02-16 thomas

您确定非HTML5文档类型不会触发相同的行为吗？ – BoltClock 2011-02-16 09:25:49

我很确定这也取决于浏览器，而不是HTML5的一般行为。 – Nick 2011-02-16 09:27:57

你<a>标记是一个内联元素，它出现在HTML5内联元素推迟到父“块”元素的行高（或高达<body>风格一路如果是这样的直接父）。

实施例：

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

和这个标记：

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

的<a>标签将具有20像素不12px的一个行高。

所以你的'inline'<a style="line-height:12px;" href="#">something</a>不起作用，但是当你将它封装在'块'级<div>元素中时，因为块元素可以决定行高。

通过将您的内联元素包装在块元素中，您可以使用CSS来使标记显示'inline-block'，这是一种比膨胀标记更好的方法。

<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; }

希望有所帮助。

来源

2012-03-21 23:34:25 ucsarge

你有一些代码吗？你有一些额外的填充或边距？

这对我的作品在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>

来源

2011-02-16 14:37:57 Emily

您需要使用EM大文本大小在IE8和IE7将不共享同一条线路的高度... e.g。使用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>

这个例子显示使用他们所有浏览器中显示的同一行height.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>

来源

2011-02-16 16:23:05 Undefined

在我的理解中，每个块级元素都有一个名为“strut”的宽度为0的字符。它将参与线盒高度的计算。当孩子的线高低于父母的线高时，看起来孩子的线高被忽略，因为当孩子的线高较小时，父母的线高会占据线框。

来源

2017-09-07 07:16:48 xwchris

为什么HTML5忽略小于字体大小的行高？

回答

相关问题