Nav text does not align verticaly on Mac (fine on Windows)

Question

I built a website for a client, and as feedback I get that the text in the navigation menu is not centered vertically. On my Windows computer it look fine on all browsers (Firefox, Chrome, Edge, Opera) But on Mac (which they have in the office) the text sticks to the top (Chrome and Safari)

Searching around for a solution I found suggestions that style reset might be missing, but I'm using Bootstrap with Normalize v3.03. So I don't think that could be the problem.

Site link: http://trasdrain.azurewebsites.net/

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
nav {
  display: block;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  .navbar {
    display: none;
  }
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #f1f1f1;
}
a {
  color: white;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #d9d9d9;
  text-decoration: underline;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
ul {
  margin-top: 0;
  margin-bottom: 10.5px;
}
ul ul,
{
  margin-bottom: 0;
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1080px;
  }
}
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
.nav > li.disabled > a {
  color: #777777;
}
.navbar {
  position: relative;
  min-height: 30px;
  margin-bottom: 0;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 0;
  }
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
.navbar-nav {
  margin: 4.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 21px;
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
.navbar-inverse {
  background-color: #7a7d80;
  border-color: 0;
}
.navbar-inverse .navbar-brand {
  color: white;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a {
  color: white;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #00ace9;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: white;
  background-color: #00ace9;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-toggle {
  border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #696b6e;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #00ace9;
  color: white;
}
.navbar-inverse .navbar-link {
  color: white;
}
.navbar-inverse .navbar-link:hover {
  color: #00ace9;
}
.navbar-inverse .btn-link {
  color: white;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #00ace9;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444;
}
.navbar {
  border-bottom: 2px solid white;
  border-top: 2px solid white;
  z-index: 3;
}
@media (min-width: 1024px) {
  .navbar-nav li {
    margin-right: 20px;
    margin-left: 20px;
  }
}
@media (min-width: 768px) {
  .navbar-nav > .active > a {
    border-right: 2px solid white;
    border-left: 2px solid white;
  }
}
.navbar-nav > .active > a {
  background-image: url('../img/pijl_blauw.png');
  background-position-y: 5px;
  background-attachment: local;
}
.navbar-nav .active:after {
  content: ' ';
  position: absolute;
  border: solid 10px transparent;
  border-top: solid 0px transparent;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
  border-color: #00ace9 transparent transparent transparent;
  z-index: 3;
}
.navbar-nav a {
  text-transform: capitalize;
}
body {
  font-family: DINLight;
  font-size: 12pt;
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
}
a {
  color: black;
}
.navbar-inverse .navbar-toggle {
  border: none;
}

<body>
<nav class="navbar navbar-inverse">
    <div class="container">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="/">Home</a>
                </li>
                    <li>
                        <a href="/vorteile/">Vorteile</a>
                    </li>
                    <li>
                        <a href="/installation/">Installation</a>
                    </li>
                    <li>
                        <a href="/referenzen/">Referenzen</a>
                    </li>
                    <li>
                        <a href="/kontakt/">Kontakt</a>
                    </li>
                    <li>
                        <a href="/produkte/">Produkte</a>
                    </li>
            </ul>
    </div>
</nav>
</body>