Safari rendert das Padding anders

Question

Das Nav sieht in Chrome und Firefox gut aus, aber Safari bricht in eine neue Zeile ein.

Safari:

Chrome:

CODE PEN: http://codepen.io/patrickhofer/pen/vKEbao

Die nav hat diese CSS:

nav { 
    float: left; 
    margin-top: 50px; 
    margin-left: 0px; 
} 
nav ul li { 
    display: inline-block; 
    list-style: none; 
    height: 100%; 
} 
nav ul li h1 { 
    font-size: 40.5px; 
    font-weight: 600; 
    height: 100%; 
} 
/* PADDING FOR NAV */ 
.navp { 
    padding-right: 44.3px; 
    height: 100%; 
} 

#reflect h1:hover { 
    text-decoration: underline; 
} 


#reflect { 
    position: relative; 
    -webkit-box-reflect: below -3px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, transparent 50%, transparent 100%); 
} 


#reflect:before { 
    background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(#reflect) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0); 
    content: ""; 
    height: 140px; 
    left: 0; 
    position: absolute; 
    top: 277px; 
    -webkit-transform: scaleY(-1); 
    transform: scaleY(-1); 
    width: 360px; 
} 

HTML:

<nav> 
     <ul> 
      <li id="reflect" class="navp txtRot"><h1>HOME</h1></li> 
      <li id="reflect" class="navp txtOrange"><h1>ANGEBOT</h1></li> 
      <li id="reflect" class="navp txtGelb"><h1>TEAM</h1></li> 
      <li id="reflect" class="navp txtGruen"><h1>UMWELT</h1></li> 
      <li id="reflect" class="txtBlau"><h1>KONTAKT</h1></li> 
     </ul> 
    </nav> 

ich diese so einfach CSS-Reset bin mit:

* { 
    margin: 0px; 
    padding: 0px; 
} 

Jede Hilfe sehr geschätzt!

Answer 1

Es scheint, als würde Safari die Schriftgröße auf eine ganze Zahl runden. Wenn die Größe wichtig ist, können Sie die Schriftgröße auf 40 Pixel reduzieren und eine Skalierung für das Elternelement durchführen.