Как кроссбраузерно и кроссплатформенно выравниванить текст по вертикали(шрифты)?

Question

[Ольга]

Вроде вопрос избитый и давно решенный, но вновь поставивший меня в тупик.
К примеру есть div-кнопка с надписью посерединке. Что бы отцентровать пишем в стилях:

.button{
height:30px;
line-height:30px;
padding:0 20px;
font-size:16px;
font-family:'PT Sans',Helvetica,Arial,sans-serif;
/*стили для придания прочей красоты*/
}

Вроде все должно быть по центру,но пол года назад наткнулась что на чудо-макосях надпись уползает вниз(1-2px). Ну,тут если не удавалось согласовать с дизайнером нечто среднее(типа на одной платформе чуть выше,на другой-чуть ниже) можно было прийти к супер-жестокому методу - определить ось и....
Сегодня в моем любимом FF я обнаружила что надпись тоже уползает вниз...Открываю остальной список браузеров-все ок.
Самая печаль в том,что если поставить системный шрифт,типа Arial-все выглядит прилично,а вот PT Sans сам по себе мельче , из-за чего и выходит этот косяк. Кто-то может сказать,что в данном случае можно приподнять везде и забить(ну или просто забить),типа и так нормально выглядит. Только если поля сделать меньше все выглядит куда как заметней и метод "забить" уже не прокатит.

результат (FF,Chrome,IE,Opera)


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

Кстати,заметила,что даже тут,на тостере надписи заметно-так притянуты вниз...

Answer 1

[Роман]

ИМХО, нет ничего страшного в таком поведении на разных браузерах и пилить хаки, как то не элегантно. Определять версию браузера и выдавать ему свое - ну тоже как-то....
Перфекционизм оно хорошо, но в меру.

А то так можно придраться и к разному рендерингу шрифтов на Винде, Лине и Маке, к разной интерпретации свойства letter-spacing и т.д.

Answer 2

[Алексей Николаев]

Использовать набор хаков для проблемных браузеров, и соответствующие css-правила в них, исправляющие проблему.

Также в случаях, когда line-height не помогал, помогал метод центрирования через padding (чуть меньше сверху, чуть больше снизу). Стабильность такого способа по моим наблюдениям выше.

Comments

[Ольга]

Хак для последней версии FF как-то не комильфо,на мой взгляд) а на макосях это вообще не зависит от браузера,только от платформы.

[Алексей Николаев]

Ольга вы можете также определять браузер \ ос через js или серверный язык (php), и прописывать соответствующий класс странице. Например, body class="macosx".

[Ольга]

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

[Ольга]

Все еще надеюсь на решение на чистом css... или может есть сервис по преобразованию шрифтов ,что бы их высота соответствовала заявленной(я так понимаю весь косяк именно в этом)