填充铬，但在Firefox或即

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;
}

这就是它的样子：

Chrome：

Firefox：

您也可以在此处测试：http://jsfiddle.net/ozpofj6o/

如您所见，firefox正确呈现，但不是chrome。

有什么想法吗？

Answer 1

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

您现在依靠0.9em和a上9个像素的填充来“意外地”添加最多35个像素，这可能是也可能不是。它甚至可能在下一版本的Firefox中或在不同的平台上中断。