html - 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 的相对性，它实际上没有做任何事情

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

---

为所需的任何像素值计算等效 em 的公式

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

(来源:http://v1.jontangerine.com/silo/css/pixels-to-ems/)

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

1.1235955056179775280898876404494

注意:浏览器无法渲染 umteenzillionth 像素，因此实际上只需要几个小数位。