Обновление: добавлен простой тестовый пример http://jsfiddle.net/7UhrW/1/используя normalize.css.

Chrome/WebKit и Firefox имеют разные механизмы рендеринга, которые отображают шрифты по-разному, в частности, с разными размерами. Это не слишком удивительно, но что удивительно, так это величина некоторых различий.

Я всегда могу настроить отдельные элементы на странице, чтобы сделать их более похожими, но это, мягко говоря, утомительно.Я искал более систематические решения, но многие ресурсы (например, ответы SO) просто говорят: «используйте пакет сброса». Хотя я уверен, что это исправляет множество других вещей, таких как отступы и интервалы, похоже, это не имеет никакого значения для размеров шрифта.

Например, если я возьму пакет сброса из http://html5reset.org/, я могу показать довольно большие различия (обратите внимание на размеры макета, показанные в инспекторах). [Изображения ниже на самом деле имеют более высокое разрешение, чем показано/изменен размер в этом ответе - например, в Chrome вы можете щелкнуть правой кнопкой мыши и открыть изображение в новой вкладке.]

Article Header

С Helvetica Chrome вместо этого имеет более короткую высоту.

Article Header

Используя другой шрифт, Chrome снова отображает гораздо более высокий шрифт, но, кроме того, межбуквенный интервал становится беспорядочным (вероятно, из-за жирности шрифта):

...

Article Header

Если мы попытаемся добавить безразмерный * { высота строки: 1; }, как следует из комментария, мы видим, что, хотя он дает одинаковую высоту, вертикальные смещения различаются, как и другие элементы на странице:

Я пробовал несколько пакетов сброса/нормализации, чтобы не воспользоваться. Я просто хотел подтвердить здесь, что это действительно факт жизни (даже опуская более вопиющих преступников, таких как IE и мобильные устройства), и я не упускаю какого-то супер-классного решения этой неразберихи.