如何解决此类问题？答案

【问题标题】：How to fix this kind of problem?如何解决此类问题？
【发布时间】：2010-01-11 17:49:52
【问题描述】：

<!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，然后突出显示，

那么你可以通过萤火虫看到它所在的<span>比文本本身短。

如何让span随文字自动增长？

【问题讨论】：

不应该去Doctype吗？

标签： font-size css

【解决方案1】：

尝试将line-height 更改为1.5

【讨论】：

line-height: 150% 将使其成为 div 的行高的 1.5 倍，并为孩子们修复它，尽管孩子们的 font-size 更大。 line-height: 1.5 意味着它将是每个元素的 font-size 的 1.5 倍 - 例如，跨度的 line-height 是 2.4 * 1.5 * <font-size of div>
K Prime 是正确的。另见stackoverflow.com/questions/2040788/…

【解决方案2】：

这是您的原始代码：

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

这会将div 中所有元素的line-height 设置为150%。该百分比与其计算的字体大小有关。 span继承了div的font-size，line-height就是以此为基础计算出来的。您将span 的font-size 设置为其继承大小的24 倍，但line-height 不受影响。

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

如前所述，使用 line-height: 1.5; 来修复该行为：

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

这会触发基于新字体大小重新计算line-height。它将div 内所有元素的line-height 设置为1.5 倍。这个百分比是相对于他们的实际字体大小。 span 继承了 div 的 font-size。您将span 的font-size 设置为其继承大小的2.4 倍，新的line-height 就是基于此计算的。

简而言之：line-height: 1.5（不带单位）会将元素的实际字体大小乘以1.5，以计算行高。

【讨论】：

不。它的计算line-height 是150%，但它的font-size 只是继承（100%），然后重置为240%。 240% (font-size) > 150% (line-height) — 这就是为什么在这种情况下，您应该使用动态 line-height: 1.5 而不是静态 line-height: 150%。 [术语由 K Prime 提供；)]