Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。
ナビゲーション等で画像を切り替えたい場合、CSSを用いて a:hover の背景画像をずらしたり消したりして実現する方法が良く取られます。この時、Internet Exploler 6 において背景画像のちらつき（砂時計のアイコン表示）や動作の遅延が発生する（ローカルでは確認しにくいので、注意）。サンプルは以下。
この問題はIE6固有の問題であり、他のモダンブラウザやIE5等では発現しない。背景画像のキャッシュに関わる問題。hover時のbackgroundに変更を加えると再読込が起こるようです。したがって転送速度やファイルサイズによって程度が変わる。ブラウザの設定によっても回避できるみたいですが、Web屋としてそこはスルーしたい。解決策は以下。
CSSで解決する
html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
上記のコードを埋め込みます。それだけ。「filter:expression();」はIEの独自拡張なので、他のブラウザは無視します。なのでハックの必要も無い。
ただし！ expression()は重いです。動的プロパティなので半端ない回数で実行してます。この程度なら気にするほどの負荷ではありませんが、気になる人は素直にJavaScriptを使いましょう。どうせ中身は同じです。
JavaScriptで解決する。
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
尊敬するScott Schiller氏がevil.che.luに寄稿した手法。
やってることは上記expression()と同じですが、こっちのが軽いです。全ページ・デフォルトで読み込んでるJSファイルがあるなら、そこに組み込んだほうがスマートですね。うちの場合はdefault.jsとか？
参照: evil.che.lu, No more IE6 background flicker
Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。
3 Comments
#navi li aはhoverのみbackground指定して、background : transparent url(./bg_navi.gif) repeat-x scroll right top;を#navi liで指定するというのも一つの手です。
ただし、このやり方はhover使うタグの外側にbg指定するためにもう一個タグが必要になります(今回の場合はaの外側にliがあるので問題ないですが)。 2008–01–12 15:18
今回はサンプルが悪かった（画像が軽い）ので、あまり体感できないのですが、
そのやり方でもhoverで画像を表示させる時に読込が発生しちゃいます。
カーソルオン時にhover画像に切替わるまでタイムラグが生じる感じです。
とはいえ<li>に背景を設定するというのは巧い手で、
<li><a href="">リンク１</a></li>
...のようなときに、<li>にhover画像、<a>に通常時の画像を設定し、
a:hoverで background: none; すると表示上の遅延はなくなります。
どうしても砂時計アイコンは出てしまうんですけどね^^;
なので今回の方法と併用していくと幸せになれるかと思います。
コメントthx! 2008–01–12 16:47
(IE6にはホント辟易させられます＞＜)
execCommandは使ったことないので今度試してみたいと思います。 2008–01–13 09:35