五星好评应对空心星星限定宽度

[DikkooXie]

大圣老师您好，在跟着您的GitHub项目学习”评五星“案例时发现了一个问题：

在您的项目中，评分组件的使用效果是良好的，但貌似不能离开您在 index.html 文件中添加的这一段样式：

html,body{
  font-family: serif;
}

如果使用其它字体（例如我在复刻时没有设定字体），实体星星对空心星星的覆盖可能存在问题：

我认为这也许是空心星星的宽度自动导致的。

如果我为所有的星星（不论空心实心）添加一个.star样式，稳定性更好：

.rate .star{
    display: inline-block;
    width: 1em;
}

同时我也在.rate > span.hollow中补充了高度限制，避免星星往下浮动：

.rate > span.hollow {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0; 
  width: 0; 
  height: 1em; /* 新增：高度为1em */
  overflow: hidden;
}

通过这两步，就可以实现不设置字体组件仍正常工作。但我的实现方法可能也不够优雅，对于bug的理解也有问题。不敢班门弄斧，还是希望能得到大圣老师的指点~ 再次感谢大圣老师的优质课程