li 的高度大于它在 FireFox 中的容器

Question

我有一个奇怪的问题。在 Chrome 和 IE 中，一切都显示正常，但在 FireFox 中则不然。见下文：

上面看到的导航代码如下

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about-us/">About Us</a></li>
        <li><a href="/products/">Products</a></li>
        <li><a href="/contact-us/">Contact Us</a></li>
    </ul>
</nav>

还有 CSS

nav {
    margin: 0 0 10px 0;

    text-align: center;
    background: #0054a6;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

nav li {
    display: inline-block;
    margin: 10px -4px 10px 0;
}

nav li a {
    padding: 12px 75px;

    text-decoration: none;
    background: #0054a6;
    color: #ffffff;
}

nav li a:hover {
    background: #ffffff;
    color: #000000;
}

为什么容器的高度与其内容不同？我不是在寻找解决方案，只是解释为什么它使用我的代码这样做。

Answer 1

您会看到顶部和底部填充对内联元素（即您的锚点）的影响。 See this previous answer for some background。我还制作了一个little fiddle here，我希望它可以将您的问题归结为相当明显的问题。 （基本上，如果垂直填充超过内联元素的行高，则该元素可以延伸到容器的边界之外。）

因此，您的锚元素正在脱离其容器，因为它们是内联的，但设置了顶部和底部填充。为了解决这个问题（作为奖励，让他们的整个容器可点击，而不仅仅是文本），我会将它们变成块：

nav li a {
    display: block; /* Fix breakout problem */
    padding: 12px 75px;

    text-decoration: none;
    background: #0054a6;
    color: #ffffff;
}

您还应该将li 元素包装在ul 中；它们不能是 nav 元素的子元素。

（我可能也会考虑摆脱 div 的包装，而只针对您的样式设置 nav 元素。我不确定它是否添加了任何东西。This JSFiddle is my final adjustment to your code。）