我的结构如下
<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已经简化
最佳答案
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 像素,因此实际上只需要几个小数位。
关于html - css字体大小继承不适用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23049294/