CSS：以ems计算：font-size里面的字体大小？

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的值中（没有意义），它表示父元素的字体大小。因此，在您的示例中，数量0.7em表示封闭元素的字体大小的0.7倍，后者已经缩小了字体大小。

要解决此问题，只需相应选择数字即可。如果你想要的是复制文本字体大小的0.7倍的小文本，并且封闭元素的字体大小是复制文本大小的0.8倍，那么你需要数字0.7 / 0.8，即.small应该有{{ 1}}。

Answer 2

请勿使用em，请使用px。或仔细计算。当用于指定字体大小时，em单位指的是父元素的字体大小。

Answer 3

.em是相对测量，而非绝对测量。