質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

11884閲覧

IE10,11で擬似クラスが反映されないのですが、どうすればよろしいでしょうか。

KyutoYosihama

総合スコア30

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/05/02 03:02

編集2017/05/02 03:04

CSSだけで動くキラっと光るアイコンを作ったのですが
下記コードがIE環境下だと上手く動きません。

HTML

1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<style media="screen"> 7/* --- Newアイコン 20170429--- */ 8span.newIcon-a{ 9display: block; 10font-size: 14px; 11height: 19px; 12width: 56px; 13padding: 2px 3px; 14margin-left: 20px; 15display: block; 16position: relative; 17z-index: 2; 18overflow: hidden; 19border-radius: 5px; 20background-color: #FEBC01; 21color: #ffffff; 22text-align: center; 23text-decoration: none; 24cursor: default; 25transition: .25s linear; 26-webkit-transition: .25s linear; 27-moz-transition: .25s linear; 28} 29span.newIcon-a::before { 30display: block; 31position: absolute; 32z-index: -1; 33left: -30%; 34top: -50%; 35content: " "; 36width: 30px; 37height: 100px; 38transform: rotate(30deg); 39-webkit-transform: rotate(30deg); 40-moz-transform: rotate(30deg); 41background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 42background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); 43background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); 44animation: shiny 3s infinite linear; 45-webkit-animation: shiny 3s infinite linear; 46-moz-animation: shiny 3s infinite linear; 47} 48@media all and (-ms-high-contrast:none){ 49span.newIcon-a::before { 50display: block; 51position: absolute; 52z-index: -1; 53left: -30%; 54top: -50%; 55content: " "; 56width: 30px; 57height: 100px; 58transform: rotate(30deg); 59background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 60animation: shiny 3s infinite linear; 61} 62} 63 64span.newIcon-s{ 65display: block; 66font-size: 14px; 67height: auto; 68width: 54px; 69padding: 4px 3px 3px; 70margin-left: 20px; 71display: block; 72position: relative; 73z-index: 2; 74overflow: hidden; 75border-radius: 5px; 76background-color: #FEBC01; 77color: #ffffff; 78text-align: center; 79text-decoration: none; 80cursor: default; 81transition: .25s linear; 82-webkit-transition: .25s linear; 83-moz-transition: .25s linear; 84} 85span.newIcon-s::before { 86display: block; 87position: absolute; 88z-index: -1; 89left: -30%; 90top: -50%; 91content: " "; 92width: 30px; 93height: 100px; 94transform: rotate(30deg); 95-webkit-transform: rotate(30deg); 96-moz-transform: rotate(30deg); 97background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 98background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); 99background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); 100animation: shiny 3s infinite linear; 101-webkit-animation: shiny 3s infinite linear; 102-moz-animation: shiny 3s infinite linear; 103} 104@media all and (-ms-high-contrast:none){ 105span.newIcon-s::before { 106display: block; 107position: absolute; 108z-index: -1; 109left: -30%; 110top: -50%; 111content: " "; 112width: 30px; 113height: 100px; 114transform: rotate(30deg); 115background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 116animation: shiny 3s infinite linear; 117} 118} 119@keyframes shiny { 1200% { 121 left: -30%; 122} 12320% { 124 left: 120%; 125} 126100% { 127 left: 120%; 128} 129} 130@-webkit-keyframes shiny { 1310% { 132 left: -30%; 133} 13420% { 135 left: 120%; 136} 137100% { 138 left: 120%; 139} 140} 141@-moz-keyframes shiny { 1420% { 143 left: -30%; 144} 14520% { 146 left: 120%; 147} 148100% { 149 left: 120%; 150} 151} 152 153 154/* --- Newアイコン 20170429--- */ 155</style> 156</head> 157 158<body> 159 <span class="newIcon-a">NEW!</span> 160 <br> 161 <span class="newIcon-s">NEW!</span> 162</body> 163 164</html> 165

chrome,
Firefox,
Safari
では動きました。

DOCKTYPE宣言したり、
ベンダープレフィクスつけたり、
したのですが、上手くいきません。

どうしたら良いでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベンダープレフィックスの書順が、無し 有り のようになっていますが、CSSは後から出るものを優先するので 有り 無し が良いと思います。(表示に特に問題が出ることは少ないと思いますが)

animation を全部ばらして指定してみるとかどうでしょう。

CSS

1span.newIcon-s::before { 2 animation-name: shiny; 3 animation-duration: 3s; 4 animation-timing-function: linear; 5 animation-delay: 0; 6 animation-iteration-count: infinite; 7}

投稿2017/05/02 05:35

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KyutoYosihama

2017/05/02 07:00

バラして指定してみたんですけどダメでした。 自分が無知で申し訳ないのですが、 ベンダープレフィクスの書き順の有り無しってどういうことなのでしょうか? transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); を -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); というふうに書くということでしょうか?
kei344

2017/05/02 07:04

> というふうに書くということでしょうか? そうです。
KyutoYosihama

2017/05/02 07:28

なるほど! ただ書き順を変えてもダメでした。 やはりbackground-image: にIE用のベンダープレフィックスを付ける方法しかなさそうです。 ありがとうございました。
guest

0

ベストアンサー

background-image: にIE用のベンダープレフィックスを付けるとうまくいきました。
background-image: -ms-linear-gradient(...);
IE11で確認。

投稿2017/05/02 05:05

rik

総合スコア1151

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KyutoYosihama

2017/05/02 05:21

試してみたらできました! ありがとうございます! ただ、デベロッパー画面でみると、各項目に横線が入って、効いていない状態のままなんですよね。 なんでだろう...
rik

2017/05/02 05:28

今回の件は試していませんが、F12 開発者ツールを開いた状態だと(エミュレーションが正しくても)意図しない結果になることがよくありました。IEを開きなおすと正常に戻ります。バグなんでしょうかねぇ?
KyutoYosihama

2017/05/02 06:46

私の方では開きなおしても消えなかったです。 バグかもしれないです(^^;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問