为什么段落变得越来越高？

在Firefox和Chrome和Safari（最新的所有，在Mac 10.6.8）如果我使用浏览器的开发人员工具缩小以下跨度的字体大小，我可以观看段落的高度（线条高度） 几个像素提高：为什么段落变得越来越高？

<p style="line-height: 40px; background: red;"> 
    Some sample text some sample text. 
    <span style="font-size: 100%;">As this span's text size gets smaller, the paragraph gets taller.</span> 
</p>

有人可以解释为什么出现这种情况？

来源

2012-02-01 Paul K

这是一个引人入胜的问题！最有趣的是，段落加载了不正确的行高（41px），然后在跨度减小到96％之后假设正确的（40px）。 – skybondsor 2012-02-01 23:26:20

我还没有试过这个，但是尝试为'span'设置'display：inline-block'。当我遇到这种问题时，这种修复方法通常可行...... – elclanrs 2012-02-03 03:54:26

好了，我贴你的样品HTML和CSS内嵌到爵士小提琴，这里的链接：

http://jsfiddle.net/sauhL/

然后我用萤火虫来改变font-size:100%;下降到99，98等等。你是对的，当你为了字体大小的价值而一个一个下去的时候，红色的盒子会稍微变大一点。

问题是你的行高预先设定为40px，这会导致你所谓的'错误'，因为行高适用于不同的字体尺寸导致不同的高度渲染，在js小提琴的情况下，换行也是红框高度“渲染”的一个因素。在%下降了几个点之后，红箱没有更多的扩展，而是规模缩小了。

通过将line-height:100%应用于标准化高度的跨度并确保没有奇怪的增加，可以很容易地解决这个问题。当将固定值（例如40px）与百分比值（100%或其他）相混合时，您可以预期出现这些类型的“错误”或异常情况。

希望能够解决您的问题

来源

2012-02-07 01:19:52 Sotkra

为什么段落变得越来越高？

回答

相关问题