IEで透過処理が効かない時の対応

IEでフェードが効かない(フェードのアニメーション無しで切り替わる)現象に遭遇したので解決法のメモ。

サンプルコード

HTML

<div id="fade"><div><img src="image.jpg" /></div></div>

CSS

#fade {
	position: absolute;
}
#fade img {
	position: absolute;
}

JavaScript

$(function() {
	$('#fade div').hide();

	$(document).on('click', '#button', function() {
		$('#fade div').fadeIn();
	});
});

IEで透過処理が効かない時の対応のデモページ

jQueryでフェードをかけるようにしていますが、フェードさせる要素にopacityを直接指定しても
効いていませんでした。
　

解決方法

いろいろ試してみたところ、opacityを指定する子要素(img)を絶対配置にしていることが原因みたいでした。
ただ今回は、imgを絶対配置にする必要があったので、下記のようにフェードする要素に
position: relative;を指定して対応しました。

CSS

#fade {
	position: absolute;
}
#fade div {
	position: relative;
}
#fade img {
	position: absolute;
}

解決方法のデモページ
　

IE8の対応

上記だとIE8でまだopacityが効いていなかったので、imgにfilter: inherit;を指定することで対応できました。

CSS

#fade {
	position: absolute;
}
#fade div {
	position: relative;
}
#fade img {
	position: absolute;
	filter: inherit;
}

IE8での解決方法のデモページ