Arial font renders slightly wider in Mac browsers
Posted: Tue Mar 18, 2014 4:54 am
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
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