IE 11では思ったように星の色が変わりません。

星にマウスを乗せた時、色がつくように実装をしております。
Chrome, Edge, Firefox, Safariでは問題なく期待通りに動きますが、
なぜかIE11では星が1つのサイズしか色がつかないです。

下記がソースコードになります。

html
1<html>
2
3  <style>
4    .select-star-rating {
5      font-size: 0;
6      white-space: nowrap;
7      display: inline-block;
8      width: 250px;
9      height: 50px;
10      overflow: hidden;
11      position: relative;
12      background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
13      background-size: contain;
14  }
15  .select-star-rating > i {
16      opacity: 0;
17      position: absolute;
18      left: 0;
19      top: 0;
20      height: 100%;
21      width: 20%;
22      z-index: 1;
23      background: url('data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogNDhweDsgaGVpZ2h0OiA0OHB4OyBvcGFjaXR5OiAxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzRCNEI0Qjt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTUxMC42OTgsMTk2LjU5M2MtMy42MS0xMS4yLTE0LjAzNC0xOC43OTUtMjUuNzk0LTE4Ljc5NUgzMjkuMjFMMjgxLjc5MSwzMC4xNTUKCQljLTMuNTk5LTExLjItMTQuMDE4LTE4LjgwOC0yNS43OTEtMTguODA4Yy0xMS43NzIsMC0yMi4xOTIsNy42MDgtMjUuNzkxLDE4LjgwOGwtNDcuNDE4LDE0Ny42NDJIMjcuMDk3CgkJYy0xMS43NjEsMC0yMi4xODUsNy41OTQtMjUuNzk1LDE4Ljc5NWMtMy41OTksMTEuMiwwLjQzNiwyMy40NDksOS45OTksMzAuMzAybDEyNi4yNDYsOTAuNjQzbC00OC41OTgsMTQ3LjU0CgkJYy0zLjY5NCwxMS4xOTMsMC4yNzgsMjMuNDcsOS44MDEsMzAuMzk4YzkuNTI5LDYuOTI2LDIyLjQ0LDYuODk3LDMxLjk0LTAuMDU4TDI1Niw0MDMuNTk0bDEyNS4zMTIsOTEuODI0CgkJYzkuNSw2Ljk1NiwyMi40MTEsNi45ODUsMzEuOTQxLDAuMDU4YzkuNTIyLTYuOTI3LDEzLjQ5NC0xOS4yMDUsOS44MTEtMzAuMzk4bC00OC42MS0xNDcuNTRMNTAwLjcsMjI2Ljg5NQoJCUM1MTAuMjYyLDIyMC4wNDIsNTE0LjI5OCwyMDcuNzkyLDUxMC42OTgsMTk2LjU5M3oiIHN0eWxlPSJmaWxsOiByZ2IoMzMsIDE1MCwgMjQzKTsiPjwvcGF0aD4KPC9nPgo8L3N2Zz4K');
24      background-size: contain;
25  }
26  .select-star-rating > input {
27      -moz-appearance: none;
28      -webkit-appearance: none;
29      opacity: 0;
30      display: inline-block;
31      width: 20%;
32      height: 100%;
33      margin: 0;
34      padding: 0;
35      z-index: 2;
36      position: relative;
37  }
38
39  .select-star-rating > input:hover + i, input:checked + i {
40      opacity: 1;
41  }
42
43  .select-star-rating > i ~ i{
44      width: 40%;
45  }
46  .select-star-rating >i ~ i ~ i{
47      width: 60%;
48  }
49  .select-star-rating >i ~ i ~ i ~ i{
50      width: 80%;
51  }
52  .select-star-rating >i ~ i ~ i ~ i ~ i{
53      width: 100%;
54  }
55
56  </style>
57  <body>
58
59    <span class="select-star-rating">
60      <input type="radio" name="rating" value="1"><i></i>
61      <input type="radio" name="rating" value="2"><i></i>
62      <input type="radio" name="rating" value="3"><i></i>
63      <input type="radio" name="rating" value="4"><i></i>
64      <input type="radio" name="rating" value="5"><i></i>
65    </span>
66
67  </body>
68</html>

アドバイスをいただければと思います。
よろしくお願いいたします。

追記(キャップチャー追加）

マウスを五つ目の星に乗せた場合

[IE11]

※ 上記のキャプチャはMacのVirtualBox上でのキャプチャです。

[Chrome]

追記(再現環境追加）

Windows7 - IE11
Windows10 - IE11
Mac(VM Windows7) - IE 11

上記の環境で再現することができます。

azuapricot

2019/12/17 02:25

ディベロッパーツールでエラーなどは出ていませんでしたか？

richellin7

2019/12/17 02:37

出ておりません。。。。

m.ts10806

2019/12/17 02:42

CSSはエラーでないと思います。「できているブラウザ」「できていないブラウザ」の画面キャプチャをご提示ください

richellin7

2019/12/17 02:49

キャプチャを追加いたしました。

azuapricot

2019/12/17 03:00

CSSが無効になっている場合スタイル部分に赤線が引かれたような気もします

miyabi_pudding

2019/12/17 03:27

まずは、デベロッパーツールで、二個目以降の青星の位置を確認するといいかも。そもそも、z-indexとpositionのブラウザ解釈の違いかと思います。そもそも、その位置でposition: absoluteを使うやり方だと、ややこしくて実装難しい気がします。星一個一個は、グレーとブルーの一組にして、positon: static（初期値）で、横並びにし、その一個一個の中で、position: absoluteで、グレーと青星を重ねる、ってやった方がやりやすいと思いますよ。

kyoya0819

2019/12/17 03:40

本当にIE11ですか？

richellin7

2019/12/17 03:53

> まずは、デベロッパーツールで、二個目以降の青星の位置を確認するといいかも。そもそも、z-indexとpositionのブラウザ解釈の違いかと思います。そもそも、その位置でposition: absoluteを使うやり方だと、ややこしくて実装難しい気がします。星一個一個は、グレーとブルーの一組にして、positon: static（初期値）で、横並びにし、その一個一個の中で、position: absoluteで、グレーと青星を重ねる、ってやった方がやりやすいと思いますよ。アドバイスしていただき、ありがとうございます。チャレンジしてみます。 > 本当にIE11ですか？はい！

kyoya0819

2019/12/17 03:55

これどうみてもIE7じゃないですか？それとも、何か改変するの入れてますか？

richellin7

2019/12/17 03:59

>これどうみてもIE7じゃないですか？ >それとも、何か改変するの入れてますか？何を見てIE7だとおしゃってるのかはわかりませんが Version: 11.0.9600.18860です。

kyoya0819

2019/12/17 04:00

UIです。互換性モードか何かにしていませんか？

m.ts10806

2019/12/17 04:02 編集

azuapricotさん IEの話でしたね。頭のなかChromeでした。失礼しました…。 asuchi0819さん Windowsテーマをクラシックにするとこんな感じになってると思います。こっちのほうが軽くて好む人もいますね(私もですが)

kyoya0819

2019/12/17 04:03

なるほど、理解しました。

richellin7

2019/12/17 04:05 編集

>UIです。 >互換性モードか何かにしていませんか？なるほど。本題とは関係ないですが、キャップチャ自体はMacでVirtualBoxを立ち上げてIE11での再現したものになります。 Windows7、10などの環境でもIE11では同様なことが起きております。 asuchi0819さんの環境では上記のソースコードで再現ができてないでしょうか？

m.ts10806

2019/12/17 04:07

＞キャップチャ自体はMacでこのあたり、前提条件として書いておかないと大抵の人は「windowsだ」と見ます。質問本文に環境情報詳細追記願います。ただ、どうしても客先要件に含まれているとかでない限りIE対応はマストではないと思います。社内的にIEしか使ってはいけないとか、そういうの。

richellin7

2019/12/17 04:10 編集

> このあたり、前提条件として書いておかないと大抵の人は「windowsだ」と見ます。 > 質問本文に環境情報詳細追記願います。どちらの環境（Windows7、10）であってもIE11では同様なことが起きてるので割愛しましたが、記載しておきます。指摘ありがとうございます。 >ただ、どうしても客先要件に含まれているとかでない限りIE対応はマストではないと思います。 >社内的にIEしか使ってはいけないとか、そういうの。今回はマストなので、、頭を抱えながら対応している感じです。涙

Y.H.

2019/12/17 07:28 編集

関係ないみたいなので取り消します。(DocumentMode)

s8_chu

2019/12/21 14:13 編集

richellin7 さん> この問題は既存の回答で解決していますか？もし解決している場合は、回答にベストアンサーを付与し、質問を解決済みにしていただけませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

以前に同様の質問に回答しました。
https://teratail.com/questions/178510

CSS
1      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22_x32_%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2248%22%20height%3D%2248%22%20style%3D%22opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Cg%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M510.698%2C196.593c-3.61-11.2-14.034-18.795-25.794-18.795H329.21L281.791%2C30.155%20%20%20c-3.599-11.2-14.018-18.808-25.791-18.808c-11.772%2C0-22.192%2C7.608-25.791%2C18.808l-47.418%2C147.642H27.097%20%20%20c-11.761%2C0-22.185%2C7.594-25.795%2C18.795c-3.599%2C11.2%2C0.436%2C23.449%2C9.999%2C30.302l126.246%2C90.643l-48.598%2C147.54%20c-3.694%2C11.193%2C0.278%2C23.47%2C9.801%2C30.398c9.529%2C6.926%2C22.44%2C6.897%2C31.94-0.058L256%2C403.594l125.312%2C91.824%20c9.5%2C6.956%2C22.411%2C6.985%2C31.941%2C0.058c9.522-6.927%2C13.494-19.205%2C9.811-30.398l-48.61-147.54L500.7%2C226.895%20%20%20C510.262%2C220.042%2C514.298%2C207.792%2C510.698%2C196.593z%22%20style%3D%22fill%3A%20rgb(33%2C%20150%2C%20243)%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');

投稿2019/12/17 04:42