IE11でホバー応答間違っています

タム息子：

マウスをアイコンの上に置かれたとき、それは着色されているように、それが実装されています。予想通りそれはクロム、エッジ、FirefoxとSafariで動作しますが、何らかの理由でIE11は、色の唯一の星を持っています。

どのように我々は、この動作を解決することができますか？

あなたがマウスを置いたとき、我々はそれがあるように色を実装しています。

.rate {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #eee;
  background-size: contain;
}

.rate>i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' class='svg-inline--fa fa-star fa-w-18 fa-9x' style='width: 48px; height: 48px; opacity: 1;'%3E%3Cpath fill='red' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z' class=''%3E%3C/path%3E%3C/svg%3E");
}

.rate>input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}

.rate>input:hover+i,
input:checked+i {
  opacity: 1;
}

.rate>i~i {
  width: 40%;
}

.rate>i~i~i {
  width: 60%;
}

.rate>i~i~i~i {
  width: 80%;
}

.rate>i~i~i~i~i {
  width: 100%;
}

<span class="rate">
  <input type="radio"value="1"><i></i>
  <input type="radio"  value="2"><i></i>
  <input type="radio" value="3"><i></i>
  <input type="radio" value="4"><i></i>
  <input type="radio" value="5"><i></i>
</span>

sanriot：

追加width、heightSVGに：

.rate {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #eee;
  background-size: contain;
}

.rate>i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' class='svg-inline--fa fa-star fa-w-18 fa-9x' style='width: 48px; height: 48px; opacity: 1;' width='48' height='48'%3E%3Cpath fill='currentColor' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z' class=''%3E%3C/path%3E%3C/svg%3E");
}

.rate>input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}

.rate>input:hover+i,
input:checked+i {
  opacity: 1;
}

.rate>i~i {
  width: 40%;
}

.rate>i~i~i {
  width: 60%;
}

.rate>i~i~i~i {
  width: 80%;
}

.rate>i~i~i~i~i {
  width: 100%;
}

<span class="rate">
  <input type="radio"value="1"><i></i>
  <input type="radio"  value="2"><i></i>
  <input type="radio" value="3"><i></i>
  <input type="radio" value="4"><i></i>
  <input type="radio" value="5"><i></i>
</span>