Recently, I was working on a website on my Mac (OSX Lion 10.7). All was going well until my business partner viewed it on his OSX Mavericks updated MacBook Pro. Chrome, Safari, they both displayed the same incongruence! The menu was all out of sorts, line heights and padding were messed up. So I proceeded to view this on my iPhone 4s which has the latest IOS7 on it. Same thing! Bizarre!
Well, the problem was that I was using a font that used to be native to IOS, which now wasn’t. Myriad Pro/Myriad was the offending font type. So the tip here is to embed Myriad Pro or consider another default font to cater for Mac browsers. Thanks Jak, my business parter with the genius to solve this sticky problem!