CSS default letter spacing for safari is different than other browsers

Question

I have a div with a certain width containing a text. the letter spacing is great in chrome, a bit different in Firefox and very different in Safari, So the width that I gave to my div is not sufficient for the text that is contained in it in Safari. Here is a link to my page that is bugging

I don't have any line in css that talks about letter spacing, so I am guessing this is a default property. Notice how the letters are overlapping at the end! How can I solve this?

Answer 1

Given the difference in how the Safari on the Mac displays fonts, I think your best bet is to add browser-specific formatting.

See this question on how to add a Mac Safari class using JavaScript: How to target Safari for Mac only?

The following should be a sufficient test instead of the one from the answer in the above link:

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)