В общем ситуация примерно такая же как вот в
этом вопросе.
Я с помощью line-height вертикально центрирую контент в блоке, в итоге все замечательно выглядит во всех браузерах под ubuntu, в которой все версталось.
Но в винде верстка поехала (во всех браузерах, да), если поправить под виндой line-height, то все выглядит ок в любом браузере, но тогда все криво под ubuntu и maс (тоже в любом браузере).
Вангую на шрифты.
От чего зависит расчет line-height в разных системах при одинаковом шрифте? И как это побороть?
Шрифты подключаются через @font-face и имеют формат .otf.
Код:
<div class="bar">
<img src="img/ico/ico-phone.png" alt="Телефон">
<a href="tel:555-555">555-555</a>
<a href="tel:8-555-555-5555">8-555-555-5555</a>
<a class="mkcall" data-featherlight="#callback" href="#call">Заказать обратный звонок</a>
<input type="search" placeholder="Поиск">
</div>
.bar {
line-height: 70px;
height: 70px;
width: 65.76788%;
margin-right: 2.69637%;
text-align: justify;
font-size: 22px;
}
Как бы логично - height: 70px, line-height: 70px - контент блока .bar отцентрировался по вертикали и это работает в винде. Чтобы контент "прижать" к центру вертикали в ubunte нужно line-height делать 54px иначе он находится внизу блока.
Шрифт FedraSansCondProBook на всякий случай.
