- 2005年8月27日 12:34
- 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サイトキャプチャスクリプト
Comments:2
- hama 2007年8月25日 18:15
最初から、さらに後ろの背景として配置しておく手法もあります。
http://kikky.net/pc/mouse_over.html同じIEでもSleipnirで動作が違います。
ひょっとするとバージョンのバグかもしれないです。
http://kikky.net/pc/ie_old_version.htmlというよりhoverで再度
background-image:url(01.gif);
background-repeat:no-repeat;
を指定しているからではないでしょうか？？？？- ZARU 2007年8月27日 09:38
>hamaさん
コメントありがとうございます。
今、検証してみたところ全く同じコードでもちらつくような現象は再現できませんでした。当時と同じIE6なのですが、もしかしたら修正パッチとかがあたっているのかも…。
（そんな話聞いたことないですが）＞同じIEでもSleipnirで動作が違います。
とのことですので、レンダリングエンジンが同じでもアプリケーションによって動作が違うのですね。これは見落としていました。
次からは検証対象に入れたいと思います。
Trackbacks:0
- TrackBack URL for this entry
- http://blog.tofu-kun.org/mt-tb.cgi/72
- Listed below are links to weblogs that reference
- WinIEで、リンクテキストの背景画像が :hover 状態になると、ちらついてしまう from Webプログラマー＋WebデザイナーなZARU日記
