IE7,8で半透明画像(png)のopacityをいじる場合

IE7,8で半透明画像(png)のopacityをいじる場合。

普通にやると、半透明の部分が真黒になる。

解決法
AlphaImageLoaderを使う

ただし、色々とクセがあるので注意。

AlphaImageLoaderを使うと、背景に画像を一枚作ってしまう。
そのため、まんま導入すると画像が二枚重なる→半透明の部分が濃くなる。

回避方法
AlphaImageLoaderを適用した画像を、透過PNG(1*1px)で置き換える。

その他注意点
aタグでimgを囲んで処理する事が多いが、aタグをdisplay:blockにしておき、widthとheightをimgと同じサイズにしておかないと上手く動かない（要検証）。
さらに、img自体にもcssでwidthとheightを指定した方が無難（要検証）。
過程でアレコレやったのでどれが必須かわからなくなってしまった。

以上をふまえてから、実際にはこんな風に書く。

$(function(){
	fixIeOpacity();
});

function fixIeOpacity(){
	var ua = window.navigator.appVersion.toLowerCase();
	if(ua.indexOf("msie 7.") != -1 || ua.indexOf("msie 8.") != -1){
		$("a img[src *= '.png']").each(function(){
			var src = $(this).attr('src');
			$(this).css({
				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+src+'", sizingMethod="scale");'
			}).attr("src","../img/cmn/spacer.png");
		});
	}
}

上記、”../img/cmn/spacer.png”が透過PNGなので、それぞれの環境で置き換え。
a img となっているのは、hover時に半透明にしていたため。

もう少しキチンと書かないと汎用性には乏しいけど、同じ症状でハマッた時のヒントにメモっておく。