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

Question

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

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

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

案例一：风格（网页）

计算样式（网页）

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

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

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

Answer 1

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