覆盖全局字体-大小: 62%

Question

我创建了一个小浏览器扩展，它将呈现一个覆盖按钮到linkedin.com网站。到目前为止，一切都运行得很好，但当我尝试它时，我意识到，LinkedIn使用了某种全局font-size: 62,5%，这打破了我的整个布局。

​

当禁用全局字体大小缩放时，我的覆盖按钮看起来很好。

我试图用font-size: 100% !important在几个地方重写这个设置--但是没有成功。我对CSS不是很有经验，所以我想也许有人在解决这个问题上有更有创意的想法:)

覆盖图如下所示：

​

预计看起来更像这样：

​

我使用Material-UI来构建设计元素。

Answer 1

当font-size设置为百分比时，它是相对于父级的。因此，将其设置为100%只是使其与父对象保持相同的大小。尝试将其设置为固定大小，例如16px，或超过100%的值进行补偿，例如1.6rem或160%，或其他值。