font-size different in -webkit and -moz browsers

Check this jsfiddle

Why is there a difference in size of the datepicker when font-size is set to 1.5em? The amount of em's is not important I have tryd different font-sizes and I still get the same problem. The red box is set to 460px and is there for you to see the difference in size of the datepicker in firefox and chrome/safa开发者_如何学编程ri.

Edit: I have already try'd using px insted of em

Firefox uses DirectWrite to render text, and Chrome doesn't.

That is the reason for the ever so slightly different size of the rendered text.

There is no way to make the text pixel-perfect the same size between the two browsers.

Read this: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

And this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

Because 1.5em isn't a precise size and depends on what the browser decides the relevant font metrics to use are.

If you want a precise size, use either px or points.