CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromefirefox
Deutro
Deutro

Reputation: 3323

Different font height in Firefox and Chrome

I want to measure the font height of an html element using jQuery.

Here is a fiddle

//HTML
<h1 id="fonty">Size of font in pixels?</h1>

//CSS
#fonty {
    font-size: 8px;
    font-family: Arial;
}

//Javascript
var height = $("#fonty").height();
console.log(height);

The method works fine but I get different results in Chrome and Firefox. Is there a way to get the correct/identical font sizes in all browsers.

Upvotes: 1

Views: 962

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

The height of a font is not only measured with font-size but its valued up by font-size and line-height and padding values:

So, the different browsers have different default values like for line-height 1px different in firefox and chrome so they may differ.

You may calculate them all by explicitly defining them.

Upvotes: 1

Related Questions