css - CSS：emsで計算：font-size内の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が必要font-size:0.875emです。

Answer 2

使用しないでくださいem、使用してくださいpx。または慎重に計算します。フォントサイズを指定するために使用される場合、em単位は親要素のフォントサイズを参照します。

Answer 3

.emは相対的な測定値であり、絶対的なものではありません。