Отступы конфликтуют с границей в Firefox 4-8?(HTML / CSS)

Question

Я нашел действительно раздражающий артефакт, который включает в себя заполнение, выходящее за границы только в Firefox 4-8.Google Chrome, IE9, Opera 11 и Safari не подвержены влиянию этого и отображают его отлично.

Я создал jsfiddle для демонстрации эффекта - когда вы наводите курсор мыши на один из элементов списка, цвет bg изменяется в этом элементе списка, так же, как и на кнопках рядом с логотипом переполнения стека.там наверху

Проблема в том, что если нижний отступ установлен на 10px, Firefox отображает его как превышение li, а другие браузеры не имеют проблем, но если он изменен на 9px, Firefox любит его и показывает это красиво, ноостальная часть толпы обозревателей отображает заполнение как «слишком короткое».

Действительно сбивает с толку тот факт, что браузер, который в целом соответствует стандартам, отклоняется от пакета, как и он.Мы прокомментировали критическую строку, чтобы вы могли изменить ее между 9 / 10px и увидеть разницу): http://jsfiddle.net/NaxUj/7/

Есть какие-либо идеи о том, что вызывает это и как это можно исправить?

Answer 1

Средняя проблема font line-heigh t, которая по-разному обрабатывается разными браузерами. Итак, вместо padding отдайте line-height вашему LI, лучше так:

ul#mainmenu li {
    display:block;
    float:left;
    width:140px;
    line-height:30px;
    text-align:center;
}

http://jsfiddle.net/NaxUj/8/

Причина:

потому что вы не определили line-height вашего li так, поэтому каждый браузер render line-height в соответствии с ними. Поэтому всегда определяйте line-height для возможности кросс-браузеров.

Проверьте этот пример, в котором я не удалил padding и дал line-height также

http://jsfiddle.net/NaxUj/9/