Question

我正在将一些页面切换到HTML5，其中包含需要使用非常小的行高设置的标题。现在，<!DOCTYPE html>以后，字体大小以下的任何行高都会被忽略。我可以随心所欲地将它们分开，但没有机会让它们更加紧密。任何人都知道为什么会这样，如果它可以治愈吗？谢谢，托马斯

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

Answer 1

您的<a>标记是一个内联元素，它出现在HTML5内联元素中，遵循其父“block”元素的行高（或者一直到<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>不起作用，但是当你将它包装在'block'级<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; }

希望有所帮助。

Answer 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>

Answer 3

您需要在IE8中使用 em 作为大文本大小，并且IE7不会共享相同的行高...例如。使用30px font-size：

此示例显示，如果文本大小为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>

Answer 4

根据我的理解，每个块级元素都有一个宽度为0的字符，称为＆＃34; strut＆＃34;。它将参与线盒高度的计算。当孩子的行高小于父母的行高时，看起来儿童的行高会被忽略，因为父母的行高会在行的时候占据行的高度。孩子的行高较小。

为什么HTML5忽略的行高小于font-size？

4 个答案: