Горизонтальные различия в CSS Nav Padding в Firefox, IE9 против Chrome, Opera

Question

У меня странная проблема в меню CSS.Существует разница в заполнении, применяемом как браузерами Firefox и IE9, так и браузерами Chrome и Opera.Пространство, оставшееся после последнего пункта меню в конце меню, отличается в обоих браузерах.Пожалуйста, посмотрите chrome.jpg и firefox.jpg внутри zip-файла, чтобы понять, что я имею в виду.Я также приложил исходный html-файл.

вот файл zip - https://www.sugarsync.com/pf/D6612639_7394829_952554

Chrome:

Firefox:

Answer 1

Это не заполнение, а скорее разница в том, как шрифты отображаются в разных браузерах. Да, это почти невозможно решить, если вы не сделаете пункты меню фиксированной ширины. :)

Версия Firefox выглядит смелее (понимаете?!) ... Это головокружительные проблемы, с которыми не весело бороться, но довольно легко объяснить.

Answer 2

IE9 / Firefox используют другую технику для визуализации текста, чем Chrome / Opera.

IE9 / Firefox используют DirectWrite, поэтому текст получается немного шире, добавляя разницу в несколько пикселей по всем пунктам меню.

Подробнее здесь: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

И прочтите это, в частности, раздел «Различия намеков и интервалов»: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

За исключением установки фиксированной ширины для каждого пункта меню (не), вы не можете это исправить. Однако не нужно , чтобы исправить это: разница в несколько пикселей между браузерами не имеет значения. Помните, что пользователи вашего сайта смотрят его только с помощью браузера one .