IE6で背景画像にマウスが乗るとリクエストが発生する問題を何とかする

css

例えば、

<ul style="list-style:none;">
  <li><a style="background: transparent url('images/help20.gif') no-repeat scroll 0px; background-position: 0 50%; background-repeat: no-repeat; padding: 2px 0 4px 20px;" href="help.html">ヘルプ</a></li>
</ul>

のような、背景に画像を指定したリンクがあるとする。

すると、IE6でこのリンクにマウスを乗せるたびにカーソルが砂時計になる。
ええええリクエスト発生してんじゃねえええええ！！！！
せっかくCSS Spriteやろうとしたのに効果減少ですよ、まったくもう。

というわけで、これを何とかする。
まず、なぜこんな現象が起きるのか調べてみたところ、どうも
・background に背景画像が指定されている
・a:hover が指定されている
・キャッシュが効いていない
こういった場合に発生するようです。

で、解決策としてはこんなやり方があるらしいです。
・Apacheの.htaccessでキャッシュ制御する
・「document.execCommand("BackgroundImageCache", false, true);」をheadタグ内に書いて
　キャッシュさせちゃう
・a:hover しない
・リンクの背景画像を指定しない(・・！)

一番即効なのが2番目のJavaScriptでヘッダーに指定しちゃう方法ですね。
でも、全ページで同じJS読んでないときは、個別に書かないといけないので面倒です。
なので、より汎用的に読み込まれる可能性の高いbase.cssとかCSS内でexpression使って実行した方がまとめられそう。

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

これで砂時計が出なくなりました。
手元の画面では特にデグレードも無さそうなのでヨカッター