- 2005/08/27
- WEBデザイン
WindowsのInternetExplorer6環境において、以下のようなリンクテキストに背景画像をCSSで指定して、:hoverの時に画像を切り替える(またはずらす)と、画像の再読み込みが入り一瞬ちらつく(フラッシュする)ような動作をする。
<ul>
<li><a href="test.html">テストページ</a></li>
</ul>
li{
test-indent:-9999px;
}
li a{
display:block;
width:100px;
height:100px;
background-image:url(01.gif);
background-repeat:no-repeat;
background-position:0px 0px;
}
li a:hover{
background-image:url(01.gif);
background-repeat:no-repeat;
background-position:0px -100px;
}
おそらく、CSSで指定した背景画像はあらかじめ読み込んでおくのではなく、アクションが起こされた段階で読み込みをしているのが原因だと思われる。とりあえず、IEの「インターネットオプション」→「インターネット一時ファイル」→「設定」の項目で「自動的に確認する」にチェックを入れると、そのような症状はなくなる。
JavaScriptで画像の先読みをさせても、解消しないのでもはやIE7に期待するしかないのかな :(
- Newer: Mighty Mouseを使ってみた!
- Older: WEBサイトキャプチャスクリプト