Font Rendering / Line-Height Issue on Mac/PC (outside of element)
If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers.
One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel font-face generator. In "Expert" mode there is an option to "Fix Vertical Metrics" which might be what you are looking for.
Line height being represented differently on browsers
Did you try to use CSS reset. This makes sure that the size and spacing is always the same independent the browser.
See more: About CSS Reset
Put it before all your CSS code:
* {
margin:0;
padding:0;
border: 0;
list-style:none;
vertical-align:baseline;
line-height: 1;
}
Related Topics
Center Aligning a Fixed Position Div
HTML Button Calling an MVC Controller and Action Method
How to Make a Whole 'Div' Clickable in HTML and CSS Without JavaScript
What's the Difference Between HTML 'Hidden' and 'Aria-Hidden' Attributes
How to Go Up a Level in the Src Path of a Url in HTML
What Is the Use of Style="Clear:Both"
How to Hide Elements Without Having Them Take Space on the Page
Localization of Input Type Number
Html5 New Elements (Header, Nav, Footer, ..) Not Working in Ie
How to Create a Curve Between Two Gradient Using CSS
Empty Vertical Space Between Columns in Bootstrap 4
How to Determine Height of Content-Box of a Block and Inline Element
Bootstrap 3 to Bootstrap 4 Cols No Longer Horizontally Aligned
<Fieldset> Resizes Wrong; Appears to Have Unremovable 'Min-Width: Min-Content'