html - 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 具有输入的最小行高”有关。

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

more info