element-ui el-form-item高度异常问题

element-ui el-form-item高度异常问题

我在最近的一个基于vue和element-ui的项目中，遇到了一个问题，感觉有点莫名其妙，所有分享出来

问题描述：在el-form-item中包el-input组件，当el-input的字体大小为12px时（也就是el-form或el-input的size为mini时），el-form-item高度会莫名其妙增加1px

<el-form label-width="128px">
  <el-form-item label="姓名">
    <el-input style="font-size: 12px"></el-input>
  </el-form-item>
</el-form>

对比图：

解决方案：将.el-form-item__content的line-height设为0

<style lang="less" scoped>
.el-form {
  /deep/.el-form-item__content {
    line-height: 0;
  }
}
</style>

虽然解决了问题，但我想了半天也不理解为什么el-input的字体大小从14px减到12px会导致el-form的高度增加1px，有没有哪位大佬可以解答一下？