css line-height rendering differently in IE, Safari and Chrome

It seems the reason you're experiencing different results using the same font, is because you're not actually using the same font. sans-serif is a variable really, and different browsers use a different font for sans-serif. If you change it to Arial, it should all be the same across all browsers.

See this post: CSS: Is Helvetica the default 'sans-serif' font on Mac and Arial the default sans-serif font on Windows?

In short: there are many fonts out there in which the linespacing values lead to inconsistencies across operating systems and across browsers.

This is true. Many fonts have issues with their vertical metrics. Such font will never align right across browsers. The only way to get the font rendered consistently across browsers is to fix its vertical metrics.

Most font providers allow you to update and fix vertical metrics of a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments.

More on that: Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?