Note: this issue is on windows.
I found that text my current website is shown different in Chrome and FF. The font is Verdana. The same word in FF look wider than in Chrome. I could not find the reason, so I start to search site that also use Verdana.
I found this site that uses Verdana for side navigation. The links look different in Chrome and FF as well. (Screenshot in chrome, in FF).
But then I found this site where text is also in Verdana. But on this site text looks the same in Chrome and FF?
Why this happens and how to make the Verdana text look the same in these two browsers.
UPD: I added the showcase in jsbin. (I thought that it was more real if I gave links to real site where you can see the problem). Open the jsbin file in Chrome and FF, run js and open console. You can see the width of the div with text in FF is 53 and in Chrome - 49.
The problem is you're scaling the font down to something very tiny, which is impossible to get right: each font engine will do pixel aligning differently, so Firefox, IE, and Chrome will all start to show different metrics the smaller you make things, because they all use different font engines.
Stick to the recommended minimum of 16px and higher and the browsers report the same dimensions; http://jsbin.com/caxasahacu/edit?html,css,js,console,output
(remember that not everyone has eagle-vision. For the vast majority of users, 16px is pretty much the smallest you can reliably make text before you're forcing people to zoom)