2012-08-02 79 views
1

我目前的項目完全基於ems。CSS:以ems計算:font-size內的字體大小?

HTML

<div class="tiny"> 
    This is some tiny text which is tiny. 
</div> 

<div class="small"> 
    This is some small text which is small. 
    <div class="tiny"> 
     And this is some tiny text inside small text which should be as tiny as the other tiny one. 
    </div> 
</div> 

CSS

.tiny { 
    font-size:0.7em; 
    line-height:1.7; 
} 

.small { 
    font-size:0.8em; 
    line-height:1.3em; 
} 

在這種情況下,文本small內的tiny文本比正常tiny文本小。

首先,爲什麼?其次,我怎樣才能解決這個問題,或使它的大小相同?

http://jsfiddle.net/DFKtF/

預先感謝您!

+2

由於您標記了您的問題[css3],因此您可以使用'rem',因此它始終相對於根元素的字體大小,而不是父元素。當然,瀏覽器的支持並不是那麼好,所有... – BoltClock 2012-08-02 17:07:16

+0

'rem'完成了這項工作!真棒! – matt 2012-08-02 17:40:36

回答

3

em單位主要表示元素本身的字體大小,但在值爲font-size(這是沒有意義的),它表示父元素的字體大小。因此,在您的示例中,數量0.7em表示封裝元素的字體大小的0.7倍,該元素已經具有減小的字體大小。

要處理這個問題,只需選擇相應的編號即可。如果您想要的文本是複製文本字體大小的0.7倍,並且封裝元素的字體大小是複印文本大小的0.8倍,則需要編號爲0.7/0.8,即.small應具有font-size:0.875em

0

請勿使用em,請使用px。或仔細計算。當用於指定字體大小時,em單位指的是父元素的字體大小。

+0

downvoting的原因是? – 2012-08-02 17:16:51

+0

推薦'px'作爲解決方案,當有人正在做正確的事情時,使用'em',並需要關於*的幫助*。 – 2012-08-02 17:21:31

+0

我說「或仔細計算」,因爲用像素做事比用計算更簡單。 – 2012-08-02 17:31:35

0

.em是相對測量值,不是絕對值。