如何在HTML中计算文本框的高度

Question

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

 <input type="text" id="test" onclick= "alert('computed height ' + window.getComputedStyle(this).height + ' and font-size ' + window.getComputedStyle(this)['font-size'])" name="test" value="Click here to get height" style=" padding: 0px; border: 0px; line-height: 1; "/> 

I am not able to find how height of the text box is 15px even if with 0 border,0 margin,0 padding and 13.33px font size.

EDIT- Though firefox works perfect by calculations, but after zooming it cuts some of the content

It Seems chrome applies some formatting to render better than firefox.

Answer 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, eg, 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.

Answer 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

Answer 3

Why you not use offset. this.offsetHeight

see this code