How to cross-browser and cross-platform align text vertically (fonts)?

Question

css

It seems that the question is hackneyed and resolved long ago, but again put me in a dead end.
For example, there is a div-button with an inscription in the middle. To center it we write in styles:

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

It seems that everything should be in the center, but half a year ago I came across that on miracle makos the inscription crawls down (1-2px). Well, here, if it was not possible to agree with the designer something in between (like on one platform a little higher, on the other a little lower), you could come to a super-cruel method - to determine the axis and ....
Today in my favorite FF, I discovered that the inscription also creeps down ... I open the rest of the list of browsers, everything is ok.
The saddest thing is that if you put a system font, such as Arial, everything looks decent, but PT Sans itself is smaller, which is why this jamb comes out. Someone can say that in this case you can lift it everywhere and score (well, or just score), like it looks normal anyway. Only if the fields are made smaller, everything looks much more noticeable and the "score" method will no longer work.
result (FF,Chrome,IE,Opera)

font downloaded from a more or less official source.
I would be extremely happy if someone explains how to deal with this (maybe I'm just missing something, but the pancake is freezing ...)
By the way, I noticed that even here, on the toaster, the inscriptions are noticeably so pulled down ...

Answer 1

IMHO, there is nothing wrong with such behavior on different browsers and sawing hacks, as it is not elegant. To determine the version of the browser and give it your own - well, too, somehow ....
Perfectionism is good, but in moderation.
Otherwise, you can find fault with the different rendering of fonts on Windows, Lin and Mac, with different interpretations of the letter-spacing property, etc.

Answer 2

Use a set of hacks for problematic browsers, and the corresponding css rules in them that fix the problem.
Also, in cases where line-height did not help, the centering method through padding helped (a little less on top, a little more on bottom). The stability of this method, according to my observations, is higher.