Chrome中的CSS输入高度

Question

如果我使用以下CSS创建input

input {
  border: none;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  padding: 0;
}

我认为input的高度为16px，但Chrome开发者工具的高度为18px。

在Firefox中，高度为16px。

导致Chrome中额外的2px的原因是什么？

小提琴：https://jsfiddle.net/fh7upk0n/

我知道如果我想要一个固定的高度，我必须使用高度，但我想知道2px的来源。

Answer 1

你应该使用身高而不是行高

  

高度 - 容器的垂直测量

     

line-height - 从第一行文字顶部到第二行文字顶部的距离

Answer 2

我的猜测是Chrome增加1px和1px以使文本可读。

当然，您可以通过添加

强制chrome显示16px高度输入

height: 16px;

但与往常一样，不要依靠line-height来确定基础元素的大小。

Answer 3

我认为Chrome中存在一些渲染错误。如您所见，当我将font-size，line-height和height都设置为18px时，汉字的顶部边缘被切掉，底部有一些额外的空间。 see the picture

Answer 4

height = font-size和box-sizing: content-box;

input {
    font-size: 20px;
    height: 20px;
    line-height: 1;
    box-sizing: content-box;
    padding: 1em;
    border: 0;
}