javascript - HTML 中文本框的高度是如何计算的

Question

虽然我已经引用了盒子模型但无法追踪如何在下面的 fiddle 中计算文本框或任何 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.33 像素字体大小，我也无法找到文本框的高度为 15 像素。

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

看来 chrome 应用了一些格式来呈现比 firefox 更好的效果。

Answer 1

好的，这是我通过 tring 学到的解释。

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

上面写着

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 和 fire-fox 对于行高有不同的实现

Chrome-如果 Chrome 无法完美呈现行高，则会忽略行高，并增加空间以完美适应文本。

FireFox-如果行高小于字体大小，FireFox 也会忽略行高，但即使无法很好地呈现它，它也会提供作为字体大小提供的精确空间。