Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<br /><br /><br />
<div style="line-height:150%">
<span style="display:block;font-size:240%;">test</span>
</div>
</body>
</html>

首先双击文本test，然后突出显示

然后你可以通过firebug看到它所在的<span>比文本本身短。

如何让span自动与文字一起成长？

Answer 1

尝试将line-height更改为1.5

Answer 2

这是您的原始代码：

<div style="line-height: 150%;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

这会将line-height内所有元素的div设置为150％。此百分比与其计算字体大小相关。 span会继承font-size的{{1}}，div会根据该line-height进行计算。您将font-size的{{1}}设置为其继承大小的24倍，但span不受影响。

简而言之： line-height将占用元素的计算字体大小的150％来计算行高，相当于将其乘以1.5。

如前所述，使用line-height: 150%代替修复了这种行为：

line-height: 1.5;

这会触发根据新字体大小重新计算<div style="line-height: 1.5;"> <span style="display: block; font-size: 240%;">Test</span> </div>。它将line-height内所有元素的line-height设置为1.5倍。此百分比与其实际字体大小相关。 div会继承span的{{1}}。您将font-size的{{1}}设置为其继承大小的2.4倍，并根据该值计算新的div。

简而言之： font-size（没有单位）会将元素的实际字体大小乘以span来计算行高。

如何解决这类问题？

2 个答案: