IE8以下で透過pngの背景が黒くなる対策

jQueryで透過png画像をopacityなど効果変化をした時に、IE8で透過部分が黒くなってしまう場合の対策方法です。
ここでは、jQueryのライブラリ化を行い、指定したセレクタのみに適用させるものをご紹介します。

なお、効果を変化させるごとに適用する必要があります。
また、画像が重なるため影などを付けている場合はそういった影などが重なって表示されてしまいます。

定義

;(function($) { $.fn.ie8LteFilterPngFix = function() { if (navigator.userAgent.toLowerCase().match(/msie [1-8]\.0/) && $(this).length > 0) { $.each($(this), function() { var srcValue = $(this).attr('src'); if ($(this).get(0).tagName.toLowerCase() === 'img' && srcValue.indexOf('.png') !== -1) { $(this).css({ 'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + srcValue + '", sizingMethod="scale")' }); } }); } return this; }; })(jQuery);

使い方

;(function($) { $(function() { $('img').ie8LteFilterPngFix(); }); })(jQuery);