[英]css font-size inheritance not applying
I have a structure like follows 我有一个如下的结构
<div class="panel">
<div class="product">
<div class="title">My little pony</div>
</div>
</div>
and the title div has its font-size set, but so does the panel div. 标题div设置了字体大小,而面板div也设置了字体大小。
.panel {
font-size: 0.89em;
}
.product .title {
font-size: 1em;
font-weight: bold;
height: 3.8em;
line-height: 1.2em;
}
When I look at this in the browser it appears that the font-size for the panel class is applying to the title div, firebug does show the panel style as being crossed out but when toggling the font-size on the title div it makes no difference to the size. 当我在浏览器中查看时,似乎将面板类的字体大小应用于标题div,firebug确实将面板样式显示为被划掉,但是在标题div上切换字体大小时却没有大小差异。
If I toggle the panel class font-size then I can see that change that I am expecting. 如果切换面板类的字体大小,则可以看到期望的更改。
What is going on here am I missing something obvious? 这是怎么回事,我是否缺少明显的东西?
Note: css has been simplified 注意:css已简化
The font-size
is being overridden (that's why you see it crossed out in Firebug), but it doesn't actually do anything because of the relativity of em
s. font-size
已被覆盖(这就是为什么您在Firebug中看到它已被删除),但是由于em
的相对性,它实际上没有任何作用。
1em
= the font size of the parent element. 1em
=父元素的字体大小。 In your case, this is .panel
with font-size: 0.89em
. 在您的情况下,这是
.panel
,其font-size: 0.89em
。 So setting .product .title
's font-size
to 1em
doesn't affect the outcome. 因此,将
.product .title
的font-size
为1em
不会影响结果。
Formula to calculate em equivalent for any pixel value required 计算所需任何像素值的em的公式
1 ÷ parent font size (px) × required pixels = em equivalent
(Credit: http://v1.jontangerine.com/silo/css/pixels-to-ems/ ) (信用: http : //v1.jontangerine.com/silo/css/pixels-to-ems/ )
Per this formula, to get the desired font size you need to set it to: 根据此公式,要获得所需的字体大小,需要将其设置为:
1.1235955056179775280898876404494
Note: the browser can't render an umteenzillionth of a pixel so only a few decimal places are actually needed. 注意:浏览器无法渲染一个千亿分之一像素,因此实际上只需要保留几个小数位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.