css字体大小继承不适用

Question

我的结构如下

<div class="panel">
    <div class="product">
        <div class="title">My little pony</div>
    </div>
</div>

并且标题div设置了字体大小，但是面板div也是如此。

.panel {
    font-size: 0.89em;
}
.product .title {
    font-size: 1em;
    font-weight: bold;
    height: 3.8em;
    line-height: 1.2em;
}

当我在浏览器中看到这个时，看起来面板类的字体大小适用于标题div，firebug确实显示面板样式被划掉但是当切换标题div上的字体大小时它对尺寸没有影响。

如果我切换面板类字体大小，那么我可以看到我期待的更改。

这里发生了什么，我错过了一些明显的东西？

注意：css已经简化

Fiddle

Answer 1

font-size被覆盖（这就是你在Firebug中看到它划掉的原因），但由于em s的相对性，它实际上并没有做任何事情。

1em =父元素的字体大小。在您的情况下，这是.panel font-size: 0.89em。因此，将.product .title font-size设置为1em并不会影响结果。

---

计算所需像素值的等效值的公式

1 ÷ parent font size (px) × required pixels = em equivalent

（来源：http://v1.jontangerine.com/silo/css/pixels-to-ems/）

根据此公式，要获得所需的字体大小，您需要将其设置为：

1.1235955056179775280898876404494

注意：浏览器无法呈现一个十亿分之一的像素，因此实际上只需要几个小数位。