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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

编辑 - 尽管firefox通过计算完美运行，但在缩放后它会削减一些内容

看起来Chrome应用了一些格式来渲染比firefox更好的格式。

Answer 1

Ok这是解释，我通过tring学习。

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

说

  

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

Chrome和fire-fox在行高

方面有不同的实现方式

<强> 铬 - 如果Chrome无法完美渲染，Chrome会忽略行高，并会增加空间以完美贴合文字。

<强> 火狐 - FireFox如果小于font-size，也会忽略行高，但即使无法很好地渲染它，它也会提供精确的font-size空间。

Answer 2

你检查了线高吗？尝试将其设置为某个px值

如果未指定高度，并且border，padding为0，那么它将是行高的行高值。每个浏览器都有自己的预定义css。所以你必须在你的CSS中重置大部分（主要是在顶部）所以所有浏览器都呈现相同的

编辑：我的意思是，line-height：1会根据浏览器预定义的样式在每个浏览器中有所不同，你最初是否重置了主体上的行高。简单的方法是给行高提供一个px值并检查所有浏览器

Answer 3

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

see this code