1 pixel line height difference between Firefox and Chrome

None of these answers solve the problem.

Set:

line-height: 1;padding-top: 2px;

Because webkit & mozilla rendering engines implement line height differently do not use this it to manipulate measurement for single line items.

For items like menus, buttons and especially really small notification bubbles, reset the line-height to normal and use padding or margins to make them behave the same.

Here's a JSFiddle illustrating this issue:http://jsfiddle.net/mahalie/BSMZe/6/

I just had this same problem, and I solved it by explicitly setting the line height and font size in <li> element that contains the <a> elements that are the tab links. Hope this helps someone in the future.

(edited html links)

This is a common issue I run into on some of my sites... when it's IE having the pixel difference, I can usually just add a pixel of margin/padding in my IE stylesheet. But when it's Safari/FireFox/Chrome, I usually just live with the pixel and make the FireFox crowd happy (for now—until Webkit rules the web!), even though it looks a little strange in the opposite browser.

However, you might also want to check out the line-height values (or add a value, if there isn't one already) on the containing ul or div element. Tinkering with that allowed me to get the padding exactly the same in FireFox, Chrome and IE.