Button Styling between FireFox 5 & Chrome

Hello please take a look at the following: http://jsfiddle.net/9kHEs/

Look at it in FireFox 5 & then in chrome.

Notice in Firefox 5 back is nicely centered. In chrome the word "back" is a little to high. I tried using line-height to center but that has no effe开发者_如何学编程ct.

What's the problem with the CSS? Why isn't "Back" being vertically centered equally across the two browsers? Thanks

Without spending more time playing with it, I'd venture to guess that it has to do with sub-pixel rounding (I've seen it with other elements and trying to center/align them), as your code looks alright.

Basically, a 12-pixel high font can't really center cleanly in a block that's 22px tall. Try making the box 24px tall and see what it does. If it still doesn't work, try setting the line-height to 24px (the same as the button) and see what you get.