html - 哪些 CSS 属性会影响 "height"属性值？

Question

代码

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

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

问题

我想了解是什么导致我的输入 改变了它的高度(我得到它增加了)。

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

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

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

屏幕截图(来自 Chrome)

如您所见，计算出的高度不受行高的影响。 相反，在 Firefox 上它似乎表现正确。

Answer 1

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

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