[IE対策]IEでfade効果などをさせた場合のPNG画像が透過されない(黒くなる)時の対処法

pngimg

pngimg

jQueryなどで画像をふわっとfade効果を与えることって今の時代当たり前のなってきたと思います。

ただIE8以下の固有のバグでカーソルをpng画像にhoverした際に輪郭に黒くギザギザした汚いものが表示されますよね。

こんな時に対処する2つの方法を備忘録を兼ねて紹介します。

alphaImageLoaderを使用

AlphaImageLoaderはCSSのみで対応可能。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Enabled, sizingMethod,src);

これをPNG画像に適用。

ただ手っ取り早く大量のPNG画像に適用させたい場合はjavascriptを利用
※jQuery必須

// for IE
jQuery(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
        jQuery('img').each(function() {
            if(jQuery(this).attr('src').indexOf('.png') != -1) {
                jQuery(this).css({
                    'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + jQuery(this).attr('src') + '", sizingMethod="scale");'
                });
            }
        });
    }
});

ただjavascriptを利用した場合は下記の問題点もあります。

問題点

  • 背景のみの指定。
  • background-repeatで表示されるタイル並べやbackground-positionに非対応。
  • AlphaImageLoaderを使ったブロック要素のpositionプロパティがrelativeかabsoluteに指定されている場合、子孫要素のa要素、疑似要素hover等が不可。

DD_belatedPNGを使用

jQuery版のbelatedPNG.jsが公開されているのでコチラを使用

belatedPNG.js(jquery版)

使用方法

<!--[if lt IE 6]>
<script src="jquery.belatedPNG.min.js"></script>
<script>
$("selector").fixPng();
</script>
<![endif]-->

png画像の要素を指定します

問題点

  • マウスオーバーで画像を変更させたい場合などはJavascriptを使わずcssで処理しないと動作しない

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法(IE対策済み)
楽天ショップのリンク付きの縦バナーを設置する方法
Sublime Text 2で自動補完してさらさら~っとHTMLやCSSを記述する方法
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
IE8以下でCSSで背景を指定したのに全く表示されない時にチェックしておきたいポイント
Web制作にルーチンワークに便利!Googleスプレッドシートを利用した簡単html生成法
WordPressをインストールしたディレクトリと同じ階層にindex.htmlがある時の開発準備TIPS
これだけあればOK! WEB制作で必須の簡単なURLを入れるだけでダミー画像が作れるWebサービス3選
Webサイトを制作したらしておくべきチェックリスト
IE7でdisplay:inline-blockを適用させる方法
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
Web制作者に必須のFTPクライアントソフト!FileZillaのメリットとは?
最近残りやすくなったな~って感じるWEB製作者の皆様!Clear Cashがめっちゃ便利と強く言いたい!
IEチェックでの修正に必須!IEの条件分岐&IE7やIE8などのCSSハック一覧をまとめてみました。
GitHubGistでWhoops.と表示された時の対処法

Menu

HOME

 TOP