Jquery 基于星星的评级不准确，带有十进制值

我有一个以星星为基础的评分，带有十进制值，但除非评分是整数，否则看起来不太准确。例如，当评级为3.7时，它看起来像：

例如，3.4看起来像：

有没有可能看起来更准确一点

我使用jQuery更改秩值，方法是从表中获取一个值，并通过将其乘以20来更改宽度，以便通过以下方式获得百分比值：

var starRating1=表[0][4]*20；
$（'star-ratings-top1'）。宽度（starRating1+'%）
。星级评定{
浮动：左；
显示：块；
unicode-bidi:bidi覆盖；
颜色：粉红色；
字体大小：40px；
高度：30px；
位置：相对位置；
左边距：10px；
}
.明星收视率。明星收视率最高{
颜色：金色；
填充：0；
位置：绝对位置；
z指数：1；
显示：块；
左：0px；
溢出：隐藏；
}
.明星收视率.明星收视率底部{
z指数：0；
}

★
★
★
★
★
☆
☆
☆
☆
☆
您可能需要的是设计师，而不是编码帮助

那么以下内容如何：
1） 将班级中的明星评等底部定为纯黑色
2） 放置在灰色背景上
您也可以用其他方式尝试。找到一个具有所有评级（3.4,3.7）的图像，并相应地将其置于左上角


。小星星评级{
背景图片：url(https://hostingpill.com/cheap-web-hosting/newimages/small-stars.png);
背景重复：无重复；
高度：0.7雷姆；
宽度：6.1428571429雷姆；
位置：相对位置；
顶部：1.0714285714rem；
左：1.4285714286雷姆；
}
.小星级{
背景位置：0-15px；
}
您能解释一下“更准确”是什么意思吗？一个1DP精度的星级已经比我见过的大多数都要高。这张图片对我来说似乎非常准确。我想他们的意思是，在人眼看来，这“看起来”不像是正确的0.7或0.4。这里的基本问题是，我们的评级在水平轴上呈线性分布，但星形在宽度上也不是均匀分布的。3只给了我们两个充满颜色的小“尖峰”，但它看起来不像是实际的。3的实际面积的星形覆盖（因为它不是。）