element ui为什么两个el-button的高度不一致？

Question

关键代码：

<el-button size="small" icon="el-icon-plus">导入</el-button>
<el-button size="small">导出</el-button>

从demo中可以看出，左边的button比右边要高出半个像素，只是因为左边加了一个icon。但button的font-size都是固定的12px，行高为1，这多余的半个像素是怎么出来的呢？

阅读 3.1k

1 个回答

得票最新

感觉是因为，我们在设置了 font-size 时，这个设置的 size 是应用给了文字的宽度还是高度的理解，以及对于文字内容对齐的部分的理解。

在遇到给 FontIcon 设置的 font-size:12px 并不是说就一定的高度等于 12px 的一个图标字体。所以在文字按照默认的 base-line 对齐时就会有问题。

简单来解决问题就是把 el-button 的 display 覆写为 inline-flex 让内容元素按照高度去对齐，而不是什么基线行高之类的东西。