CSS Angular2 ng2-rating明星不适用于Firefox

Question

我正在使用来自https://www.npmjs.com/package/ng2-rating的ng2-rating模块 仅在Firefox中，填充的星星和星星之间存在空隙 页面加载时，没有间隙
但是当我移动浏览器窗口时，会产生间隙

HTML

<span _ngcontent-rmx-4="" class="stars_rating rating_list_review">     <rating _ngcontent-rmx-4="" _nghost-rmx-6="" ng-reflect-readonly="true" ng-reflect-model="4" class="ng-untouched ng-pristine ng-valid">
        <span _ngcontent-rmx-6="" aria-valuemin="0" class="rating readonly" role="slider" tabindex="0" aria-valuemax="5" aria-valuenow="4">
            <span _ngcontent-rmx-6="">
                <i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="1" title="1">☆</i>
            </span><span _ngcontent-rmx-6="">
                <i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="2" title="2">☆</i>
            </span><span _ngcontent-rmx-6="">
                <i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="3" title="3">☆</i>
            </span><span _ngcontent-rmx-6="">
                <i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half100" class="star-icon half100" ng-reflect-title="4" title="4">☆</i>
            </span><span _ngcontent-rmx-6="">
                <i _ngcontent-rmx-6="" data-icon="★" ng-reflect-class-name="star-icon half0" class="star-icon half0" ng-reflect-title="5" title="5">☆</i>
            </span>
        </span>
    </rating>
</span>

CSS

.stars_rating {
  display: block;
  text-align: center;
  line-height: 2em !important;
}

.rating_list_review {
  font-size: 14px;
}

@-moz-document url-prefix() {
    .star-icon{
        line-height: 28px !important;
    }
}

star-icon[_ngcontent-rmx-6] {
    color: #ddd;
    font-size: 2em;
    position: relative;
}

这个问题让我发疯。任何想法如何解决它？

Answer 1

尝试添加

line-height: 1.2;

star-icon[_ngcontent-rmx-6]{}中的

。