Question

你好我的CSS爱好者们。我通常不能回答CSS问题。

这个错误发生在Chrome和IE11中，Firefox渲染它的大小相同但剪裁不同。

我有一个输入字段和一个填充了文本的div，它们应该具有相同的高度，并且应该使用父字体大小进行缩放。问题是输入字段大于预期。

div的行为与我预期的一样，其高度为font-size + padding * 2，但输入字段大于此值。

我无法将高度设置为em，因为填充是固定的，但字体大小不是。

为什么input大于div？

Answer 1

您必须为输入定义:first-line伪元素，以使两个元素的高度相同。

input:first-line {
    display: inline-block;    
}

Here您可以找到有关其工作原理的更多信息。

Answer 2

如果输入的高度是自动的，并且其高度仅由font-size的大小组成，我的意思是，不带填充和边框，将font-size设为Xpx，则输入的高度将始终更大一点这样做的原因是为了容纳字母“ j”和“ g”之类的“腿”。

尝试将字体大小设置为Xpx，将高度设置为Xpx，然后在输入中输入“ j”或“ y”，将会有少量收成。

此外，将height：auto; font-size：Xpx;和line-height：2; 这次的高度将恰好是2 * Xpx，因为当line-height为2时，会有空间容纳我上面提到的特定字母的“腿”。

该主题（上下文）也可以与另一主题相提并论，该主题与display：inline;图像底部的狭小空间有关。在div内部，如果两个元素都有边框，例如border：1px solid Crimson，则更容易看出来；例如。

谢谢。