WebKit 在输入中呈现的文本高于 div

Question

我正在尝试规范化 input 字段以显示为 div，使元素在 Firefox 和 WebKit 中具有相同的高度。当我注意到 WebKit 会将 16px/16px 文本呈现 18px 高，而 Firefox 会正确呈现它 16px.

是什么导致了这种高度差异，我该如何消除它？

console.log(document.querySelector("div").offsetHeight)
console.log(document.querySelector("input").offsetHeight)

div,
input {
  font: 16px/16px Arial;
}

input {
  padding: 0;
  border: 0;
}

<div>Lorem Ipsum</div>
<input type="text" value="Lorem Ipsum" />

Answer 1

Firefox 和 Chrome 之间的行高如何呈现不同的输入是一个问题。

只需重置行高即可解决问题：

line-height: normal;

console.log(document.querySelector("div").offsetHeight)
console.log(document.querySelector("input").offsetHeight)

div,
input {
  font: 16px Arial;
  line-height: normal;
}

input,div {
  padding: 0;
  border: 0;
}

<div>Lorem Ipsum</div>
<input type="text" value="Lorem Ipsum" />

为了进一步解释 Chrome 显示输入的方式，我不得不说它与 "Chrome has a minimum for line-height on inputs" 有关。

例如，如果您将行高设置为 17px，将字体大小设置为 16px，则不会有任何问题。

WebKit renders text in input higher than in div