爲什麼段落變得越來越高？

在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

爲什麼段落變得越來越高？

回答

相關問題