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

Question

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

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

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

案例一:样式(网页)

计算样式(网页)

案例 2:样式(在 Chrome 扩展程序中加载后)

计算样式(在 Chrome 扩展中加载后)

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

Answer 1

问题在于 em 是 CSS 中的相对单位，这意味着 font-size 为 ems 的元素将根据其 font-size parent 的字体大小。在您的第二个示例中，body 的字体大小似乎已更改为 75%，您需要将其更改为 100%。这里发生的幕后计算是 html 的默认字体大小是 16px，其中 75% 是 12px，是它的两倍 (2em)是 24px- 计算出的字体大小。