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

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