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

看起来是这样的:

Chrome :

火狐:

您也可以在这里进行测试:http://jsfiddle.net/ozpofj6o/

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

有什么想法吗？

Answer 1

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

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