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中导致额外2像素的原因是什么？

Fiddle: https://jsfiddle.net/fh7upk0n/ 我知道如果我想要一个固定的高度，我必须使用height，但我想知道这2个像素来自哪里。

- Hativ

Answer 1

您应该使用 height 而不是 line-height

height- 容器的垂直尺寸

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

- Evya2005

---

我同意。在<input>字段中，行高的行为方式并不相同。通过明确设置高度值，您可以更有信心地确保它在各个浏览器中显示相同的高度。 - Jackson

我知道如果我想要一个固定的高度，我必须使用height，但我想知道这个2px是从哪里来的。 - Hativ

您可以在此处查看差异：https://jsfiddle.net/fh7upk0n/2/。 可能Chrome默认添加了2px。 - Evya2005

Answer 2

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

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

- Lurk

Answer 3

我的猜测是Chrome在上下各增加1像素以使文本更易读。

当然，你可以通过添加代码强制Chrome显示高度为16像素的输入框。

height: 16px;

但是，不要指望使用line-height来调整下层元素的大小。

- Anthony Granger