Safari 渲染填充不同答案

【问题标题】：Safari renders padding differentSafari 渲染填充不同
【发布时间】：2016-10-01 21:56:45
【问题描述】：

导航在 Chrome 和 Firefox 中看起来不错，但 Safari 换了一个新行。

Safari：

铬：

代码笔：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;
}

非常感谢任何帮助！

【问题讨论】：

标签： html css safari

【解决方案1】：

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

【讨论】：