css - 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（没有意义的地方）中，它表示父元素的字体大小。因此，在您的示例中，数量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是相对测量，不是绝对的。