Как сделать line-height кроссбраузерным?

Question

[Кирилл]

Никак не получается сделать свойство line-height одинаковым в Google Chrome и Mozilla.
В Google Chrome текст выставляется ровно по середине:

А в Mozilla почему-то со смещением вниз:


Само свойство выглядит так:

.contacts {
    height: 69px
    font: normal 14px/5.0714285 'Open Sans', sans-serif
}

Пробовал использовать вместо пикселей em, учитывая, что font-size у body равен 13px:

body {
    font-size: 13px
    line-height: normal
}
.contacts {
    height: 69px
    font: normal 1.077em/5.0714285 'Open Sans', sans-serif
}

Но всё равно не получается.

Подскажите, пожалуйста, как сделать, чтобы во всех браузерах текст у меню был по середине без смещений? Спасибо!

Comments

[Олег]

*{margin:0;padding:0;}

[Кирилл]

Олег не помогло

[Роман Черник]

line-height: 1;

[Александр]

css-live.ru/css/metriki-shrifta-line-height-vertic...
tldr Никак.

Ввш подход к решению задачи неправилен. Нельзя осуществлять позиционирование с помощью высоты строки

Answer 1

[Кирилл]

Попробуйте флексы!

Comments

[Кирилл]

я их и использую
проблема в вертикальном выравнивании текста...

Answer 2

[NaN]

https://habr.com/company/netcracker/blog/277433/