如何文本框的高度在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; 
 
"/> 
 

我无法找到文本框的高度如何15px的，即使有0边框，0保证金，0填充和13.33px字体大小。

编辑 - 尽管Firefox的作​​品完美的计算，但变焦后它减少了部分内容

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

Answer 1

你检查行高？尝试将它设置为某些像素值

如果未指定高度，和边界，填充为0，那么这将是行高值，是原因。每个浏览器都有自己的预先定义的CSS。所以你必须重置你的css中的大部分（主要是在顶部），所以所有的浏览器呈现相同的

编辑：我的意思是，行高：1将在每个浏览器基于浏览器预定义样式不同，最初是否重置了身体的线高？找出简单的方法是给行高一个像素值，并检查为什么您不要使用偏移所有的浏览器

Answer 2

。 this.offsetHeight

see this code

Answer 3

确定这里的解释是，我学会了特灵。

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

它说

[内联元素的]内容区域的高度应根据该字体，但该规范没有规定如何。 UA可以，例如，使用EM-箱或最大伸和字体的伸...

Chrome和消防狐狸有行高度不同的实现

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

FireFox- 火狐也将忽略该行高度如果小于字体大小，但它会提供如字体大小提供精确的空间即使不能够很好地呈现它。