css - Chrome 上的 Font Awesome 堆叠图标对齐问题

Question

在屏幕截图中，带有数字 9 和 2 的图标是堆叠的 fontawesome 图标。我正在使用 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 和其他浏览器的 key 图标对齐？

Answer 1

所以看起来很棒的字体堆栈跨度增加了一个 2em 高度，这对 Firefox 来说并不适用，但会困扰 Chrome。将高度覆盖为 0em 解决了这个问题。