IEでhoverでbackgroundが効かない（動かない）対策

今まで適当だったanimationの勉強をして、スマートじゃないかったとあるコードを修正する事に。

すると、firefoxやchromeでは動くのに、IEだけ動かない　い.つ.も.の　現象に...
webに携わってる人なら幾度となく出会うシーンですね＾＾（イライラ…）

そしてIEだけNGだった件の解決策は、アニメーション前の背景cssをa｛｝のところにも入れたら解決しました。（元々見えない位置に置いてるからネ）
（ここまでの時間が…）

元々のコードは:afterにimgで画像をpositionで置いてhover時に下からニュッと動かすってやつ…だったような。。
そのままtranslateとbackgroundに変えて出来そうだけど、勉強中でまだパッとコードが浮かばないので…animationでやりました。

li a{background: url(～～～) center  ＜最初に置く位置をpx等で指定＞ no-repeat; /* ←コレ */}
li a:hover{
animation-name: hoverani;
animation-duration: 0.1s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;　/* 一括指定しても良いかも。でもIEで動かない可能性もあるらしい */
}

@keyframes hoverani {
  0%{background: url(～～～) center  ＜最初に置く位置をpx等で指定＞ no-repeat;}
  100%{background: url(～～～) center  ＜最終位置をpx等で指定＞ no-repeat;}
}

キャッシュに踊らされ

スマホ版Chromeでキャッシュを消しても古いcssが残ってるみたいでグギギ…ってなって
キャッシュのせいじゃないのかと落ち込んだけど
やっぱりキャッシュのせいだった巻…（どうしろと…） これ見つけて良かった。

色々使えそう。

https://www.nishishi.com/blog/2013/04/avoid_cache_que.html

でも１時間くらい時間無駄にした。。

文字サイズが大きくなってしまーう時

スマホのchromeで見ると文字サイズが所々適用されてない問題は
恥ずかしながらもう解決してるのだと思っていたら、そうでなく、しかし対策をしても相変わらず。。

何故自分のケースでは変わらないのか見てたら、viewportを設定してないとNGとたどり着きました。
適当に入れたり入れなかったりしてたよーな。。

例）

<meta name="viewport" content="width=760">
<meta name="viewport" content="width=device-width,initial-scale=1">

これくらい当たり前レベルなのかもしれないけど、
いいんです。　今、勉強すれば…！

必要に応じてさらにこれで。。

@media screen and (max-width: 320px){
.●ここにセレクタ●{
/*ここにcss*/
}
}

PCベースで作ったちょこっと古いサイトだからなのか、綺麗にしてるつもりがcssが増えちゃって…
もっと綺麗なコードを書ける気がしてモヤモヤするものがあるけど、取りあえずいっか。