SVG elements font-size change specifically on MacBook Firefox-CodePudding

This is weird because I have another Mac desktop, and firefox (same version I guess) and there is no problem. Only on my MacBook.

On my web-game, I have 4 buttons:

"Play" : "Cars" : 'Multiplayer" : "Download"

The page looks like this: Parking Master

Edit: Live preview at parkingmaster.tk

The reason the buttons don't look weird now is because I made a simple program that changes it on firefox.

But other OS's have windows/linux, and it'll look weird on there because the program isn't specific enough (MacBook MacOS Big Sur).

This is what it looks like without that program:

As you can see the svg elements on the buttons are "Up".

I tried changing the margin/padding, but then I found out it was the font-size css property.

It's usually "45px" because that works on every other device, but on mac, it looks better with "51.5px" (that's what the program does)

If this is a OS specific thing, how can I detect if the OS is "MacOS Big Sur" or specifically, the one I'm using (11.6.6)

TL;DR

In JavaScript, how can I check if the OS is "MacOS Big Sur/MacOS Big Sur 11.0.0 " and the browser is "FireFox Browser/FireFox Browser 90 "?

CodePudding user response：

To solve this on the .nav-btn element change your display: inline-block to display: inline-flex and add the align-items: center; and justify-content: center to this .nav-btn element as well.

Detecting specific browsers by version is a false dawn and opens up potential headaches in the future, for instance, every browser on an iPhone is just Safari in a product wrapper i.e. Chrome for iPhone is just Safari in a Chrome wrapper.