Horizontal CSS Nav Padding differences in Firefox,IE9 vs Chrome, Opera

I have a weird problem on a CSS menu. There's a difference in padding applied by both Firefox & IE9 vs Chrome & Opera browsers. The space left after the last menu item at the end开发者_开发百科 of the menu is different on both the browsers. Please see the chrome.jpg and firefox.jpg inside zip file to see what I mean. I have also attached the source html file.

here is the zip file - https://www.sugarsync.com/pf/D6612639_7394829_952554

Chrome:

Firefox:

This is not padding but likely a difference in how the fonts are rendered in different browsers. Yeah that is pretty much impossible to solve unless you make the menu items fixed width. :)

The firefox version looks bolder (see it?!)... These are brainbreaking problems not fun to deal with but quite easy to explain.

IE9/Firefox use a different technique to render text than Chrome/Opera do.

IE9/Firefox use DirectWrite, and so the text comes out ever so slightly wider, adding up to a few pixels difference over all the menu items.

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

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

Short of setting a fixed width on each menu item (don't), you can't fix it. However, you don't need to fix it: a few pixels difference between browsers does not matter. Remember, the users of your site are only looking at it using one browser.