CSS FirefoxでAngular2 ng2-ratingの星がFirefoxで動作しない

Question

ng2-ratingモジュールを使用していますhttps://www.npmjs.com/package/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

はstar-icon[_ngcontent-rmx-6]{}で

line-height: 1.2; 

を追加してみてください。