CSS 高度如何应用于输入字段？答案

【问题标题】：How does CSS height get applied to input fields?CSS 高度如何应用于输入字段？
【发布时间】：2016-10-27 17:18:46
【问题描述】：

当我使用 em 作为一个单位时，我很难理解 css height 属性是如何应用于 input 字段的。

看看这个 jsfiddle：jsfiddle

如果em 值等于基本字体大小，示例一和三的高度应该相同。如果em 基于元素中设置的字体大小（我认为这是正确的），那么示例一和示例二应该是相同的大小。事实上，这些物品的尺寸都不相同。如果我将高度设置为px，那么我可以强制它们都具有相同的大小。

是什么使我的所有输入框大小不同？

CSS：

.one {
  max-height:3em;
  height: 3em;
  font-size:1em;
  vertical-align: top;
}

.two {
  max-height:6em;
  height: 6em;
  font-size: 0.5em;
  vertical-align:top;
}

.three {
  max-height:3em;
  height: 3em;
  font-size: 0.5em;
  vertical-align:top;
}

HTML：

<input type="text" class="one" placeholder="one">
<input type="text" class="two" placeholder="two">
<input type="text" class="three" placeholder="three">

【问题讨论】：

你在干什么？示例 1 和 2 的大小相同。它按预期工作。您设置的基本字体大小乘以设置的高度 == 实际高度。因此第一个输入是 3em 高，第二个输入是 3em 高，最后一个输入是 1.5em 高。
它们在 Chrome 54 或 Safari 10 中对我的显示不同。您使用的是什么浏览器，它们的大小相同？在我使用的两种浏览器中，它们显然不一样。示例 2 比示例 1 高约 10%。

标签： html css

【解决方案1】：

这实际上似乎是 Chrome / Safari 中的一个错误。 Firefox 和 Opera 可以正确呈现它们。

解决此问题的一种方法是使用rem 而不是em：https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

但是，这还有其他潜在的陷阱和影响

【讨论】：

好吧，这一切都说得通了。在这种情况下，我实际上已经开始使用 rem，但我仍然想了解正在发生的事情的核心。如果它是一个错误，那么我至少可以忘记它并继续前进。

【解决方案2】：

如果em 基于元素中设置的字体大小（即我相信是正确的）

不，这是不正确的。

给定高度的em 是基于元素父级的字体大小，而不是给定元素本身的字体大小。

当使用em 时，输入的字体大小也基于/继承自其父字体大小。

所以这是一个整体的想法，所以如果父母的字体大小发生变化，它们的比例是相等的。

这是一个示例

div {
  font-size: 30px;
  margin: 20px 0;
}
.em1 {
  font-size: 1em;
}
.em2 {
  font-size: 2em;
}
.one {
  max-height:3em;
  height: 3em;
  font-size:1em;
  vertical-align: top;
}

.two {
  max-height:6em;
  height: 6em;
  font-size: 0.5em;
  vertical-align:top;
}

.three {
  max-height:3em;
  height: 3em;
  font-size: 0.5em;
  vertical-align:top;
}

<div>
  <input type="text" class="one" placeholder="one">
  <input type="text" class="two" placeholder="two">
  <input type="text" class="three" placeholder="three">
</div>

<div class="em1">
  <input type="text" class="one" placeholder="one">
  <input type="text" class="two" placeholder="two">
  <input type="text" class="three" placeholder="three">
</div>

<div class="em2">
  <input type="text" class="one" placeholder="one">
  <input type="text" class="two" placeholder="two">
  <input type="text" class="three" placeholder="three">
</div>

【讨论】：

谢谢，这确实有帮助。但是有一个问题 - 在您的示例中，如果您将 div font-size 替换为 2em 那么 1 和 2 的高度相同。如果是1em，则没有相同的高度。它们似乎在1.2em 附近的高度收敛。即使div 的基本字体大小被继承，我也很难理解这种行为。
@WillyC 用另外 2 个样本更新了我的答案，有 1em 和 2em，所有 3 个都表现出它们应有的行为，输入 1 和 2 的高度相等，所以如果你没有，你可能错过了什么
您示例中的第二个 div 在 Chrome 54 或 Safari 10 上没有相同高度的输入框（这与我在示例中的 jsfiddle 中得到的结果相同）。此外，即使没有周围的 div，它们不应该都从单个父级继承共同的字体大小，从而没有不同的输入框大小吗？当您在父 div 中指定特定字体大小时，我了解模型的工作原理，但为什么甚至需要该 div？输入框 1 和 2 不应该有一个共同的父级和一个共同的字体大小吗？
@WillyC 我刚刚在 Firefox、Edge、IE11 上测试了这个并且一切正常，所以它必须是 Chrome 54 或 Safari 10 上的一个错误
谢谢。如果它只是基于 webkit 的浏览器中的一个错误，我更容易理解这一点。我从你的回答中学到了，即使这最终只是一个错误。

【解决方案3】：

这是因为您使用的em 等于应用 em 的元素的计算字体大小。要获得更好的解释，请阅读this。

【讨论】：