CODEWITHSUNDEEP
cssgoogle-chromesafari
tau
tau

Reputation: 6749

Safari text vertical alignment

Safari 8 and Chrome 44 (on Windows) seem to have different heights for elements with only text in them. I would expect the element height to be set by the size of the text, and that seems to be the case, it's just that both browsers don't agree on the height.

You can see it via these screenshots:

Safari 8 Chrome 44 on Windows

Is there a way of correcting this?

Upvotes: 0

Views: 1202

Answers (1)

thomasfuchs
thomasfuchs

Reputation: 1

Without a codepen or similar live example it's hard to tell (I'd need to see the actual exact CSS); but the first thing I'd recommend is to try setting line-height: 21px; to force a specific line-height.

If that doesn't work, use height: 21px; to force a height. You may be hitting rendering differences between the WebKit and Blink browser engines; or rendering differences between OS X and Windows (which I think is actually more likely).

Have you double-checked that the same font is used on both browsers? It's hard to tell from the screenshots, but it looks like that perhaps on one browser the font is the fallback font.

Upvotes: 1

Related Questions