在 chrome 中填充但在 firefox 或 ie

Question

我对 chrome 中的额外填充有疑问。

在 Firefox 和 IE 上一切正常，但 chrome 在“ul”标签和“nav”标签之间的底部添加了一个 2px 的填充。

这是 HTML 代码：

<nav id="mainMenu">
    <ul id="menuLinks">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>

还有CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3em;
}

nav#mainMenu {
    height: 35px;
    background-color: #F5F5F5;
    margin-bottom: 10px;
    border-bottom: 1px solid #C2C2C2;
    border-radius: 5px 5px 0px 0px;
}

nav#mainMenu ul {
    float: left;
    padding-top: 15px;
    list-style-type: none;
}

nav#mainMenu ul li {
    padding-left: 5px;
    display: inline;
}

nav#mainMenu ul li a {
    color: black;
    font-size: 0.9em;
    font-weight: bold;
    background-color: #FFFFFF;
    padding: 5px 15px 4px 15px;
    border-top: 1px solid #C2C2C2;
    border-left: 1px solid #C2C2C2;
    border-right: 1px solid #C2C2C2;
    border-radius: 4px 4px 0px 0px;
}

看起来是这样的：

铬：

火狐：

你也可以在这里测试：http://jsfiddle.net/ozpofj6o/

如您所见，firefox 渲染正确，但 chrome 渲染不正确。

有什么想法吗？

Answer 1

您的问题与在锚点中使用 font-size:0.9em 有关。这使您依赖于字体渲染机制来确定它们到底有多高，在 Chrome 中使用其当前的文本渲染引擎恰好短了 2 个像素。如果您将精确高度 (35px) 放在容器上并且仍希望获得可预测的结果，则应为锚点指定精确高度。

您现在指望0.9em 和a 上的 9 像素填充“意外”加起来为 35 像素，它可能会或可能不会。它甚至可能在 Firefox 的下一个版本或不同的平台上中断。