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

Question

我使用em作为单位时，在理解css height属性如何应用于input字段时遇到了一些困难。

看看这个jsfiddle： jsfiddle

如果em值等于基本字体大小，则示例1和3的高度应相同。 如果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">

Answer 1

如果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> 

Answer 2

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

解决此问题以使其在所有浏览器中呈现相同效果的一种方法是使用rem而不是em ： https : //www.sitepoint.com/understanding-and-using-rem-units-in-css/

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

Answer 3

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