Почему в разных браузерах по-разному появляются разные поля?

Question

У меня есть сайт с меню навигации, которое отлично отображается в Google Chrome, но в других браузерах оно выглядит по-другому. Зачем?

URL-адрес является: http://www.liquidchurch.com/satur8te-home/

В Chrome (45) заполнение 22px 15px 21px 13.95px отображается правильно.

Но в Firefox (40) это же обивка показывает, как слишком короткий.

В Internet Explorer (11) та же обивка проявляется как слишком долго, что приводит к навигации нарушения на второй линии.

В Firefox я могу исправить навигации, изменив отступ слева значение от 13,95 до 14,5 пикс

В IE я могу исправить навигации, изменив Обивка левые значения от 13,95 до 12,6 пикс

Answer 1

Я считаю, что это связано с визуализацией текста, а не с заполнением. Firefox, в частности, немного тяжелее, что может вызвать небольшой сдвиг в ширине элемента. - Пол Редмонд 58 мин. Назад

Это точно. См. differences between the various browsers in text rendering.

Это было вокруг долгое время и очень раздражает. Было бы лучше, вместо жесткого кодирования вашей ширины в стиле, чтобы закодировать его таким образом, чтобы он реагировал на ширину страницы и вес визуализированного шрифта.

Еще лучший трюк заключается в том, чтобы занять фон для каждой из кнопок и растянуть его по всему меню и установить его ширину. Затем вы можете вырезать и разделить <ul> для каждого пункта меню, и пусть последний элемент будет неоднозначным, чтобы он заполнился до конца.

Вот JSFiddle, чтобы продемонстрировать это с помощью HTML и CSS с вашего сайта.