拡大も縮小もしてないのにIEだけ画像が荒い場合の対処法

IEだけ画像が荒くなる

ブラウザチェックしてる際に発見したIE独自で起こるバグ。
拡大も縮小もしてないのに、IEで見た時だけ画像が荒くなるという現象が発生。

残念ながら最新のIE11でも起こります。
まったくいくつになってもIEとAndroid標準ブラウザは・・・チッ( ・ ´ 皿 ・`)

早速、結論と対処法

僕の場合、以下のようにCSSのbackgroundに画像を使い、そのクラスをborder-radiusで角丸にしたことで、今回の現象が起こったようです。

.hoge{
    background:url(hoge.png);
    border-radius:4px;
}

なので、HTMLの階層を増やしてCSSを分けるとか、とにかく背景と角丸を一緒に指定しなければ画像が荒くなるのを防げます。

以上っ!

スポンサーリンク
レクタングル(大)
レクタングル(大)
スポンサーリンク
レクタングル(大)