CSS教程:line-height屬性的繼承
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:24:47 作者：佚名 
我要評(píng)論
我要評(píng)論原文：http://www.planabc.net/2008/07/25/unitless-line-heights/
淘寶商城的detail 頁(yè)面“產(chǎn)品詳情”部分是商家自定義區(qū)塊，曾出現(xiàn)這樣一個(gè)問(wèn)題：
<style type="text/css">
p {
line-height:17px;
}
</style>
<div clas
原文：http://www.planabc.net/2008/07/25/unitless-line-heights/
淘寶商城的detail 頁(yè)面“產(chǎn)品詳情”部分是商家自定義區(qū)塊，曾出現(xiàn)這樣一個(gè)問(wèn)題：
<style type="text/css">
p {
line-height:17px;
}
</style>
<div class="mdse-detail">
<p>
<strong style="font-size:30px">
品牌：XZX<br />
市場(chǎng)價(jià)：145元<br />
顏色：黑色<br />
面料：棉<br />
尺碼：S M L<br />
衣長(zhǎng)：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 />
袖長(zhǎng)：S 17 M 17.5 L18<br />
由于測(cè)量方法不同，誤差在2CM左右！
</strong>
</p>
</div>
你會(huì)發(fā)現(xiàn)上面例子的文字會(huì)重疊在一起！這是什么原因呢？
由于.detail-content 中的 p 元素繼承了默認(rèn)設(shè)置的全局樣式 line-height:17px，而自定義區(qū)塊又是由商家自定義，其內(nèi)字體被設(shè)置為了 font-size:30px;（可能為任意值），根據(jù) Inline formatting model，得知該文字的 line-box 高為 17px，多出的字體部分上下溢出，所以會(huì)出現(xiàn)字體重疊的現(xiàn)象。
那這個(gè)問(wèn)題如何解決呢？
解決方案：我們給 .mdse-detail 下的 p 元素設(shè)定樣式屬性 line-height:1.4。
為什么解決方案里的 1.4 不帶單位？
元素的 line-height 屬性值會(huì)繼承父元素（或祖先元素）的 line-height 屬性值，如果屬性值有單位，則繼承的值是換算后具體的 px 值而非原始的值（比如：em、%），而如果屬性值沒(méi)有單位，則瀏覽器會(huì)繼承數(shù)值（無(wú)單位），然后根據(jù)該元素的 font-size 值重新解析得到新的 line-height 值。這個(gè)和 table 的 tr 設(shè)置 display 屬性有一點(diǎn)點(diǎn)類似（tr.style.display = ”;，IE 顯示 block，而 Firefox 等標(biāo)準(zhǔn)瀏覽器顯示 table-row）。
還有另外一個(gè)相對(duì)低效的方法，但也不失為一個(gè)快捷的解決方案：
.mdse-detail p * {
line-height:140%;
}
參考閱讀：《Unitless line-heights》
相關(guān)文章
- 你對(duì)CSS層疊和繼承的概念和用法你是否熟悉，這里和大家分享一下，文檔中的一個(gè)元素可能同時(shí)被多個(gè)CSS選擇器選中，每個(gè)選擇器都有一些CSS規(guī)則，這就是層疊，而所謂繼承，就2011-01-27
- 我們知道文檔中的一個(gè)元素可能同時(shí)被多個(gè)css選擇器選中，每個(gè)選擇器都有一些css規(guī)則，這就是層疊。所謂繼承，就是父元素的規(guī)則也會(huì)適用于子元素。2010-03-14
- 下面小編就為大家?guī)?lái)一篇CSS默認(rèn)可繼承樣式詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-06
- 這篇文章主要介紹了CSS中的繼承,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-16
CSS教程:學(xué)習(xí)CSS的繼承性-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
所謂CSS的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁(yè)的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)2008-10-17CSS樣式表中繼承關(guān)系的空格與不空格-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
這可能是一個(gè)非常簡(jiǎn)單的問(wèn)題，但是今天花一點(diǎn)點(diǎn)時(shí)間把這個(gè)簡(jiǎn)單的問(wèn)題在說(shuō)清晰一點(diǎn)，相信大家對(duì)ＣＳＳ的學(xué)習(xí)和認(rèn)識(shí)會(huì)很有幫助，強(qiáng)化一些概念的東西，對(duì)以后的工作效率的2008-10-17CSS教程:水平對(duì)齊(text-align)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。 1.語(yǔ)法 text-align具體參數(shù)如下： 語(yǔ)法：text-align:left|right|center|justify 說(shuō)明：2008-10-17CSS教程：行高line-height屬性(2)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
相關(guān)文章：CSS教程：行高line-height屬性(1) 7.3.3行高的計(jì)算與繼承 以em、ex和百分比為單位的行高，其基數(shù)是元素本身的字體尺寸。例如有代碼如下： <pstyle=&quo2008-10-17CSS教程：理解繼承屬性及應(yīng)用-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
4.5繼承 在本書的[3.3.2繼承與層疊]一節(jié)曾經(jīng)簡(jiǎn)要介紹過(guò)繼承：(X)HTML元素可以從其父元素那里繼承部分CSS屬性，即使當(dāng)前元素并沒(méi)有定義該屬性。 4.5.1值的繼承 繼承也是2008-10-17- 下面小編就為大家?guī)?lái)一篇深入理解CSS定位與層疊。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-15