Chrome 中的 CSS 输入高度

Question

如果我input使用以下 CSS创建一个

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

我预计 的高度为 16px input，但 Chrome 开发者工具显示的高度为 18px。

在 Firefox 中，高度为 16px。

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

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

我知道如果我想要固定高度，我必须使用 height，但我想知道 2px 来自哪里。

Answer 1

我的猜测是 Chrome 添加了 1px 向上和 1px 向下以使文本可读。

当然，您可以通过添加来强制 chrome 显示 16px 高度输入

height: 16px;

但与往常一样，不要指望line-height底层元素的大小。