HTML文本框的高度是如何计算的 [英] How height of a text box is calculated in HTML

问题描述

尽管我已经提到了盒子模型，但无法追踪
在下面的小提琴中如何计算文本框或任何HTML元素的高度

 < input type =textid =testonclick =alert（'calculated height'+ window.getComputedStyle（this）.height +'和font-size'+ window.getComputedStyle（this）['font-size']）name =testvalue =点击此处获取高度style =padding：0px; border：0px; line- height：1;/>  

我无法找到文本框的高度15px，即使有0边框，0边距，0填充和13.33px字体大小。编辑 - 虽然firefox完美的计算，但在缩放后，它削减了一些内容

它似乎铬应用一些格式比渲染更好的Firefox。

解决方案

确定下面是解释，我通过tring了解到。

参考规范
http：//www.w3 .org / TR / CSS2 / visudet.html＃inline-non-replaced

其中有

< blockquote>

内联区域的高度应该以字体为基础，但本规范没有规定如何。例如，UA可以使用em-box或字体的最大上行和下行...

Chrome和fire- fox有不同的行高

Chrome -
Chrome会忽略行高if它不能完美呈现它，并且会增加空间来完美地适应文本。

FireFox -
如果FireFox小于字体大小，它也会忽略行高，但即使不能很好地渲染，它也会提供精确的字体大小。

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.

解决方案

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.

这篇关于HTML文本框的高度是如何计算的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！