Letter spacing issue/difference between browsers

Question

I'm having a problem with a website I'm working on, and I can't seem to find a solution of any kind to it. The problem I'm having lies with the site's top menu: Although it looks ok in most browsers, there's a small handful of them where the menu "breaks" by adding an extra line with the last item.

I've been researching what could be causing it and the issue seems to be the way browsers handle letter spacing - Some browsers, particularly mobile ones, seem to add an extra pixel between characters that makes the header content not fit in its space. This happens even when the letter-spacing is set to zero for the whole site: Some browsers seem to just add an extra space so what most browsers use as zero would be -1 for them.

I'm at the end of my wits when it comes to fixing this and I can't think of anything other than using an image for the top menu which is, of course, a terrible idea. So I'd like to ask if anyone else here has ran into such issue and if anyone knows how to make it so the character spacing is actually standarized through browsers.

The website in question is this one:

http://maxworth.ca/blog/

You can see the issue by using chrome regularly (It will look ok) and then using the chrome dev tools to render the site as Android 4.0.2 - Galaxy Nexus. The problem seems to crop up on a bunch of (mostly mobile) browsers and, although I know the site wasn't exactly coded to look perfect in mobile browsers, this is the one gamebreaking issue we have currently.

Thanks in advance.

Answer 1

I think a good approach to this is to have your menu items "justify" to fill the width of your container, regardless of font size, letter-spacing, etc., rather than trying to manipulate the items to fill the space. Every browser renders text a little differently, so it's very difficult to get a consistent look. This solution works really well: How do I justify a horizontal list?