如何解決這類問題？

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

如何解決這類問題？

回答

相關問題