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 。）