原文：http://www.planabc.net/2008/07/25/unitless-line-heights/

淘寶商城 的detail 頁面“產(chǎn)品詳情”部分是商家自定義區(qū)塊，曾出現(xiàn)這樣一個問題：

<style type="text/css">
p {
    line-height:17px;
}
</style>

<div class="mdse-detail">
    <p>
        <strong style="font-size:30px">
            品牌：xzx<br />
            市場價(jià)：145元<br />
            顏色：黑色<br />
            面料：棉<br />
            尺碼：s  m  l<br />
            衣長：s 89  m 90   l 91<br />
            肩寬：s 35  m 36   l 37<br />
            胸圍：s 88  m 92   l 96<br />
            下擺：s 104 m 108  l 112<br />
            袖長：s 17  m 17.5 l18<br />
            由于測量方法不同，誤差在2cm左右！
        </strong>
    </p>
</div>

你會發(fā)現(xiàn)上面例子的文字會重疊在一起！這是什么原因呢？

由于.detail-content 中的 p 元素繼承了默認(rèn)設(shè)置的全局樣式 line-height:17px，而自定義區(qū)塊又是由商家自定義，其內(nèi)字體被設(shè)置為了 font-size:30px;（可能為任意值），根據(jù) inline formatting model，得知該文字的 line-box 高為 17px，多出的字體部分上下溢出，所以會出現(xiàn)字體重疊的現(xiàn)象。

那這個問題如何解決呢？

解決方案：我們給 .mdse-detail 下的 p 元素設(shè)定樣式屬性 line-height:1.4。

為什么解決方案里的 1.4 不帶單位？

元素的 line-height 屬性值會繼承父元素（或祖先元素）的 line-height 屬性值，如果屬性值有單位，則繼承的值是換算后具體的 px 值而非原始的值（比如：em、%），而如果屬性值沒有單位，則瀏覽器會繼承數(shù)值（無單位），然后根據(jù)該元素的 font-size 值重新解析得到新的 line-height 值。這個和 table 的 tr 設(shè)置 display 屬性有一點(diǎn)點(diǎn)類似（tr.style.display = ”;，ie 顯示 block，而 firefox 等標(biāo)準(zhǔn)瀏覽器顯示 table-row）。

還有另外一個相對低效的方法，但也不失為一個快捷的解決方案：

.mdse-detail p * {
    line-height:140%;
}

參考閱讀：《unitless line-heights》