如何解决这类问题？

<!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自动与文本一起成长？

来源

2010-01-11 user198729

不应该去Doctype？ – BastiBen 2010-01-11 08:47:25

只要你喜欢就行。 – user198729 2010-01-11 11:07:14

尝试改变line-height到1.5

来源

2010-01-11 08:48:35

哦，似乎在工作。为什么？有什么区别？ – user198729 2010-01-11 08:51:09

'line-height：150％'会使'div'的行高达到1.5倍，并为孩子们修复它，尽管孩子们的font-size更大。 'line-height：1.5'意味着它是每个元素的'font-size'的1.5倍 - 例如，跨度的'line-height'是2.4 * 1.5 * – 2010-01-11 09:40:11

K总理是正确的。此外，请参阅http://stackoverflow.com/questions/2040788/whats-the-difference-between-line-height1-5-and-line-height150-in-css/2040799#2040799 – 2010-01-11 09:57:11

这是你的原代码：

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

这台div至150％内的所有元素的line-height。这个百分比是相对于他们的计算的字体大小。 span继承div的font-size，并基于此计算line-height。您将span的font-size设置为继承大小的24倍，但line-height不受影响。

简而言之：line-height: 150%将采取该元素的计算字体大小的150％计算行高度，相当于1.5乘以它。

如前所述，使用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乘以元素的实际字体大小来计算线高度。

来源

2010-01-11 09:49:52

但不是'跨度计算出的字体大小已经达到了150％？ – user198729 2010-01-11 09:58:49

没有。其计算的'line-height'是'150％'，但其'font-size'只是继承（'100％'），然后重置为'240％'。''240％'（'font-size'）>'150％'（'line-height'） - 这就是为什么在这种情况下，你应该使用动态的'line-height：1.5'而不是静态的'line-身高：150％'。 [由K Prime提供的术语;]] – 2010-01-11 10:28:18

如何解决这类问题？

回答

相关问题