Высота лития больше, чем у контейнера в 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> 

И КСС

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.)