IE6 でアンカー上に CSS で指定した背景が消えるのを防ぐ

CSS を使って a タグに背景を指定して、 hover で画像を切り替えるような事をよくするんだけど、 IE6 上だと何かチカチカしてスムーズに切り替えを行ってくれない。
これをどうしたらうまい事切り替えてくれるのかを調べたときのメモ。

解決策は驚くほど簡単なんだけどね。

例

以下に例を作ってみた。 IE6 でこのページを見れば、どんな事が発生してるかわかると思う。

動作

ソース

	<style>
		a#flicker { background-image:url(/upload/36_flicker.png); width: 111px; height: 37px; overflow: hidden; }
		a:hover#flicker { background-position: 0 38px; }
	</style>

	<a href = "#" id="flicker"></a>

解決策

色々あるっぽいんだけど、以下の方法が一番楽。
CSS に以下を追加する。

html
{
	filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

参考文献

No more IE6 background flicker

コメント