Question

从互联网上的一些CSS重置模式中汲取灵感，我想我会使用规则body {line-height: 1}。这导致我的<input>和<button>元素在计算高度时出现问题，尽管字体值相同。示例JSFiddle。我在Chrome中遇到了这个问题。

有人可以告诉我这些额外的2个像素来自Chrome吗？关于{line-height: 1}

的使用可能有任何建议

＆＃13;

body {
  line-height: 1;
  margin: 0;
}

button, input {
  font: inherit;
  padding: 5px;
  width: 50vw;
}

input {
  box-sizing: border-box;
}

#row {
  display: flex;
}

＆＃13;

<div id="row">
  <button>
    18px Chrome, 16px FF
  </button>
  <input type="text" value="My font is 18px">
</div>

<div id="column">
  <button>
    My font is 16px
  </button>
  <input type="text" value="18px Chrome, 16px FF">
</div>

＆＃13;

修改从Mozilla.org开始，给出了行高的解释。

行高CSS属性设置用于行的空间量，例如文本。在块级元素上，它指定元素中线框的最小高度。在未替换的内联元素上，它指定用于计算线框高度的高度。

例如，使用line-height: 0计算出的样式如下......

Chrome：

按钮line-height: 0; height: 0;
输入line-height: 0; height: font-size + ~13-14%;

火狐：

按钮line-height: 0; height: 0;
输入line-height: font-size; height: font-size/line-height;

上面演示的示例：JSFiddle.

我不明白Chrome和Firefox是如何尊重上述解释的。它们都是内联块并以不同的方式计算高度。有人能用更明确的话来解释Mozilla开发者网站的引用吗？

谷歌浏览器为我的输入字段添加了2个像素的高度

0 个答案: