SVG 元素的字体大小专门在 MacBook Firefox 上更改答案

【问题标题】：SVG elements font-size change specifically on MacBook FirefoxSVG 元素的字体大小专门在 MacBook Firefox 上更改
【发布时间】：2022-05-31 00:06:39
【问题描述】：

这很奇怪，因为我有另一个 Mac 桌面和 firefox（我猜是相同的版本）并且没有问题。仅在我的 MacBook 上。

在我的网络游戏中，我有 4 个按钮：

“播放”：“汽车”：“多人游戏”：“下载”

页面如下所示：

编辑：实时预览parkingmaster.tk

按钮现在看起来不奇怪的原因是因为我制作了一个简单的程序，可以在 Firefox 上更改它。

但是其他操作系统有 windows/linux，它看起来很奇怪，因为程序不够具体（MacBook MacOS Big Sur）。

这是没有该程序的样子：

如您所见，按钮上的 svg 元素是“向上”。

我尝试更改边距/填充，但后来我发现它是 font-size css 属性。

它通常是“45px”，因为它适用于所有其他设备，但在 mac 上，使用“51.5px”看起来更好（这就是程序所做的）

如果这是特定于操作系统的事情，我如何检测操作系统是“MacOS Big Sur”还是我正在使用的操作系统（11.6.6）

TL;博士

在 JavaScript 中，如何检查操作系统是否为“MacOS Big Sur/MacOS Big Sur 11.0.0+”而浏览器是否为“FireFox Browser/FireFox Browser 90+”？

【问题讨论】：

标签： javascript html css svg macos-big-sur

【解决方案1】：

要在 .nav-btn 元素上解决此问题，请将您的 display: inline-block 更改为 display: inline-flex 并将 align-items: center; 和 justify-content: center 添加到此 .nav-btn 元素。

按版本检测特定浏览器是一个错误的曙光，并且会在未来带来潜在的麻烦，例如，iPhone 上的每个浏览器都只是产品包装器中的 Safari，即 iPhone 版 Chrome 只是 Chrome 包装器中的 Safari。

【讨论】：