CSS:在ems中计算:字体大小内的字体大小？

Question

我目前的项目完全基于ems。

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;  
}

在这种情况下，tiny文本中的small文本比普通的tiny文本要小。

首先，为什么？第二，我怎样才能修复这个或使它的大小相同？

http://jsfiddle.net/DFKtF/

提前谢谢你！

Answer 1

em单元主要表示元素本身的字体大小，但在font-size的值中(这是没有意义的)，它表示父元素的字体大小。因此，在您的示例中，quantity 0.7em意味着封闭元素字体大小的0.7倍，它已经减少了字体大小。

要处理这个问题，只需相应地选择数字。如果您想要微小的文本，即拷贝文本字体大小的0.7倍，而包围元素的字体大小是复制文本大小的0.8倍，那么您将需要数字0.7/0.8，即.small应该有font-size:0.875em。

Answer 2

不要使用em，使用px。或者仔细计算。当用于指定字体大小时，em单元引用父元素的字体大小。

Answer 3

.em是相对的测量，而不是绝对的。