DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> line-height屬性的繼承
line-height屬性的繼承
編輯:CSS詳解     

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

淘寶商城 的detail 頁面“產品詳情”部分是商家自定義區塊,曾出現這樣一個問題:

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

<div class="mdse-detail">
    <p>
        <strong style="font-size:30px">
            品牌:XZX<br />
            市場價: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>

 

你會發現上面例子的文字會重疊在一起!這是什麼原因呢?

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

那這個問題如何解決呢?

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

為什麼解決方案裡的 1.4 不帶單位?

元素的 line-height 屬性值會繼承父元素(或祖先元素)的 line-height 屬性值,如果屬性值有單位,則繼承的值是換算後具體的 px 值而非原始的值(比如:em、%),而如果屬性值沒有單位,則浏覽器會繼承數值(無單位),然後根據該元素的 font-size 值重新解析得到新的 line-height 值。這個和 table 的 tr 設置 display 屬性有一點點類似(tr.style.display = ”;,IE 顯示 block,而 Firefox 等標准浏覽器顯示 table-row)。

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved