Safari渲染填充不同

Question

导航在Chrome和Firefox中看起来很不错，但Safari会突破新的界限。

Safari：

Chrome：

代码笔：http://codepen.io/patrickhofer/pen/vKEbao

导航有这个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>

我正在使用它作为简单的CSS重置：

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

任何帮助非常感谢！

Answer 1

似乎Safari将字体大小四舍五入到整数。如果调整大小很重要，您可以将字体大小更改为40px并对父元素执行缩放变换。