Arial font renders slightly wider in Mac browsers

[caciavar]

See my fiddle here:
http://jsfiddle.net/56RDu

On Windows (chrome, firefox):
The nav fits inside of the fixed-width outer container and fixed-width ul.

On Mac (safari, firefox):
The nav does not fit inside the fixed-width outer container and fixed-width ul. When comparing the widths of the rendered <a> tag between firefox on windows and firefox on mac, the mac version is a few pixels wider.

Any suggestions on the proper solution to fix this? I've encountered this a few times with a few different sites where the <li> items in a nav span exactly or almost the full width of their fixed-width container.

Thanks

[zaidcrowe]

have you tried using a css reset script, or a framework like bootstrap?

it'll help mitigate these kinds of xbrowser issues

...ill look at this in more detail when i have more time later