Page 1 of 1

Arial font renders slightly wider in Mac browsers

Posted: Tue Mar 18, 2014 4:54 am
by 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

Re: Arial font renders slightly wider in Mac browsers

Posted: Tue Mar 18, 2014 12:39 pm
by 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 :)