WebKit vs Mozilla vertical alignment of font glyphs in box

Question

This test image shows how wildly different Safari positions text inside a box vs Firefox (Safari

Answer 1

Have you tried using the Reset at the top of your stylesheet file??

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

You can find the explanation & the code here: http://meyerweb.com/eric/tools/css/reset/

I hope this would help you!

Answer 2

Unfortunetly, there isn't a solution to this problem. Text rendering is done differently in almost every browser, and even between major browser versions it sometimes changes. In some browsers it is determined by the particular font rendering systems and settings from the OS. There have always been and always will be trade offs for one type of font rendering to another, and every one of those will change with different types of displays on different types of hardware.

Sorry, you'll have to live with non-pixel perfect fonts between browsers until there is a complete monopoly by a single browser, a single OS with no available display setting choices, a single monitor type and size, and a single video card. In other words, it's never going to match pixels perfectly as long as your site supports multiple devices, browsers, displays, etc.

(Kudos for doing your own homework and testing first though. Your question was well researched and thought before asking. I wish we could have given you a better answer after all that work.)