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

Question

虽然我已经提到了框模型，但是无法跟踪下面的小提琴如何计算文本框或任何HTML元素的高度

 <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; "/> 

即使使用0边框，0边距，0填充和13.33px字体大小，我也无法找到文本框的高度是15px。

编辑-虽然通过计算，firefox可以完美地工作，但是缩放后它会切掉一些内容

似乎chrome应用了某些格式以使其比firefox更好。

Answer 1

好的，这是我通过练习中学到的解释。

请参阅规范http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

这说

[内联元素]的内容区域的高度应基于字体，但是此规范未指定如何。 UA可以例如使用em-box或字体的最大升序和降序...

Chrome和fire-fox的行高实现方式不同

镀铬 Chrome会忽略行高度，如果它是不能够完美呈现，并会增加空间完全适合文本。

FireFox-如果 FireFox小于font-size，它也将忽略行高，但即使无法很好地呈现，它也将提供作为font-size提供的准确空间。

Answer 2

你检查行高了吗？ 尝试将其设置为一些px值

如果未指定高度，并且border，padding为0，则将是导致行高的值。 每个浏览器都有自己的预定义CSS。 因此您必须在CSS中重置大多数（大多数位于顶部），以便所有浏览器呈现相同的

编辑：我的意思是，您最初是否在主体上重置了行高，但每个浏览器的line-height：1会有所不同，具体取决于浏览器的预定义样式。 找出问题的简单方法是给line-height一个px值并检查所有浏览器

Answer 3

为什么不使用偏移量。 this.offsetHeight

看到这个代码