Safari Font Rendering seems to be different than in other browsers

Question

I have an issue with the following HTML-Tag:

<a href="/partner-team/team" class="button button__style--1">MEHR</a>

The CSS looks like this:

a {
    text-decoration: none;
}

.button {
    padding: 0.2rem 4rem;
    cursor: pointer;
}

.button__style--1 {
    color: #429a95 !important;
    border: 2px solid #429a95;
    transition: color .3s, background .3s;
    background: white;
    font-weight: 300;
}

In Safari I get the following visible using Dev Tools:

In Chrome as example I get the following using Dev Tools:

Now I'm wondering why the text in Safari is rendered way more at the top. Is there any possible solution to get the same rendering on all browsers (Safari, Chrome, Firefox, Opera and Edge)?

Answer 1

Below is a working snippet:

a {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; 
}

.button {
    padding: 0.2rem 4rem;
    cursor: pointer;
}

.button__style--1 {
    color: #429a95 !important;
    border: 2px solid #429a95;
    transition: color .3s, background .3s;
    background: white;
    font-weight: 300;
}

<a href="/partner-team/team" class="button button__style--1">MEHR</a>

All that was done here was adding the following to your a tag styles:

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;