Горизонтальные CSS-накладки Различия в Firefox, IE9 и Chrome, Opera

Question

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

здесь почтовый файл - 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/

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