什么CSS属性会影响“高度”属性值？

Question

代码

input {
  box-sizing: content-box;
  font-size: 20px;
  line-height: 20px;
}

<input type="text" value="test" />

问题

我正在尝试了解导致我的输入导致height更改的原因（我将其更改）。

还有什么会影响输入的height值？

我的问题是我需要不在元素上设置height，但让它只依赖于其他属性。

如果我box-sizing: border-box，我还必须指定padding和border。但是对于 content-box ，我似乎缺少设置一些属性来间接影响输入元素height。

屏幕截图（来自Chrome）

如您所见，计算出的height不受line-height的影响。 在Firefox上，它似乎行为正确。

Answer 1

似乎我能找到的唯一解决方案是指定一个显式的height并强制浏览器达到所需的值。

input {
  box-sizing: content-box;
  font-size: 20px;
  line-height: 20px;
  height: 20px;
}