相同的样式值，相同的元素但在同一浏览器上的计算值不同

Question

我正在处理chrome扩展，它返回任何元素的font-size属性。我正在将ajax响应数据加载到扩展文档中并计算其属性。现在发生了一些奇怪的事情，我无法找出原因。

我在网页上有一个标题标签，我正在分析。网页上的样式选项卡（检查元素）表示其字体大小为2em，计算值为32像素。

现在，当我在Chrome扩展程序中加载相同的页面时，我的扩展程序上的样式选项卡（检查元素）显示其字体大小为2em，但显示其计算样式为24px。 为了澄清，我附上了网页和chrome扩展的样式和计算的syles的图像。

案例1： 风格（网页）

计算风格（网页）

案例2：样式（在Chrome扩展程序中加载后）

计算样式（在Chrome扩展程序中加载后）

我只是想知道为什么会这样？相同的样式（2em）但浏览器窗口显示计算大小为32，扩展窗口（在同一浏览器上）显示24px。

Answer 1

问题在于em是CSS中的相对单位，这意味着字体大小在ems中的元素将基于其父级字体大小的字体大小。在第二个示例中，似乎body的字体大小已更改为75％，您需要将其更改为100％。这里发生的幕后计算是html的默认字体大小是16px，其中75％是12px，两倍（2em）是24px-计算字体大小