鍍金池/ 問答/HTML/ font-size和line-height在瀏覽器內(nèi)部渲染是有相應(yīng)的規(guī)則嗎？

font-size和line-height在瀏覽器內(nèi)部渲染是有相應(yīng)的規(guī)則嗎？

<div style="line-height:200px; border:1px solid #34538b;">
    <span style="font-size:60px; border:1px solid #a0b3d6;">大大的文字</span>X后面是靜止的文字。
</div>

clipboard.png

為什么div高度不為200，設(shè)置一段的font-size，比如53，54，55px，在chrome，opera中div高度不會(huì)改變，而firefox是0.25的往上遞加，font-size和line-height在瀏覽器內(nèi)部是有相應(yīng)的規(guī)則嗎？

回答
編輯回答
維他命

CSS2 沒有具體定義字體高度怎么影響盒子高度，所以不同 UA 可能會(huì)有細(xì)微差異。

The height of the content area should be based on the font, but this specification does not specify how.

另外

Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.
2018年5月20日 11:37
編輯回答
浪婳

“字體”所在行這個(gè)東西的大小不止受font-size，line-height影響，還受字體本身影響。
具體的你可以看看這個(gè)，雖然我也看過- -，但是我已經(jīng)忘了說了啥了。

2018年9月18日 23:50
編輯回答
眼雜

主要原因是line-height是一個(gè)可繼承的屬性，所以外面的div設(shè)置了行高之后，里面的span也繼承了這個(gè)行高，導(dǎo)致div的高度被撐大了。將span的行高重新設(shè)置一下，比如60，就可以看到效果。

2017年3月25日 13:32
編輯回答
帥到炸

你需要了解一下line-height
http://www.cnblogs.com/fengzh...

2017年12月9日 03:39