Chrome上的字体真棒堆叠图标对齐问题

Question

在屏幕截图中，数字9和2的图标是堆叠的字体图标。我正在使用vuetify作为前端框架

在Firefox上，我的图标显示正确，并且与其他图标显示在同一行。

但是在Chrome和Safari中，它们没有对齐

我尝试设置display: inline，但是堆叠的图标过高。

我的按钮代码是

<v-btn icon
    v-on="data.on">
    <span class="fa-stack fa-3x"></span>
    <v-icon color="green">fas fa-circle fa-stack-2x</v-icon>
    <strong class="fa-stack-1x text-primary">{{count}}</strong>
</v-btn>

如何让这些图标与chrome和其他浏览器的键图标对齐？

Answer 1

因此，看起来字体超棒的堆栈跨度增加了MyInterface的高度，这既不会影响Firefox，又会影响Chrome。将高度覆盖为0em可以解决此问题。