为什么我在使用 Vue/Nuxt 时会遇到 fontawesome stars 的间距问题？

Question

我正在用 Nuxt.js 使用 fontawesome 图标设置一个星级评分系统，出于某种原因，每当两个不同的星星彼此相邻放置时，就会有一个奇怪的空白将两者分开。例如，这里是全星评级：

这里有一个空星：

您可以看到空心星号被左侧的一些空格分隔开。这似乎只在 vue 循环中使用它们时才会发生，所以我确定它与 Vue 的虚拟 DOM 有关，但我不确定它可能是什么。我的组件如下所示：

<template>
<span class="stars">
    <span v-for="i in stars.full" class="fas fa-star" aria-hidden="true"></span>
    <span v-for="i in stars.half" class="fas fa-star-half-alt" aria-hidden="true"></span>
    <span v-for="i in stars.empty" class="far fa-star" aria-hidden="true"></span>
</span>

满、半、空只是一个整数。

Answer 1

如果您查看源代码，您可能会看到：

<span class="stars">
  <span class="fas fa-star" aria-hidden="true"></span><span class="fas fa-star" aria-hidden="true"></span><span class="fas fa-star" aria-hidden="true"></span><span class="fas fa-star" aria-hidden="true"></span>
  <span class="far fa-star" aria-hidden="true"></span>
</span>

空星换行，这就是造成空白的原因。您希望所有 <span> 元素都在同一行以防止它们之间出现空格，所以试试这个。

<span class="stars">
  <span v-for="i in stars.full" class="fas fa-star" aria-hidden="true"></span><span v-for="i in stars.half" class="fas fa-star-half-alt" aria-hidden="true"></span><span v-for="i in stars.empty" class="far fa-star" aria-hidden="true"></span>
</span>

丑陋，但它有效。