How Height Of A Text Box Is Calculated In Html

Though I have already referred box model but could not track How height of a text box or any HTML element is being calculated in following fiddle I am not able to find how heigh

Solution 1:

Ok Here is the explanation, I learnt by tring.

Refer the specification http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

which says

The height of the content area [of inline elements] should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font...

Chrome and fire-fox have different implementation for line-height

Chrome- Chrome will ignore line-height if it is not able to render it perfectly and will increase the space to fit text perfectly.

FireFox- FireFox will also ignore the line-height if it is less than font-size but it will provide exact space provided as font-size even if is not able to render it nicely.

Solution 2:

did you check the line-height? try setting it to some px value

if the height is not specified, and border, padding are 0 then it will be the line-height value that is the cause. Each browser have it's own pre defined css. so you have to reset most of them in your css (mostly at the top) so all browsers render the same

edit: I meant, line-height:1 will be different in each browser based on the browsers predefined styles, did you reset the line-height on the body initially. Easy way to find out is giving the line-height a px value and check all browsers

Solution 3:

Why you not use offset. this.offsetHeight

see this code