Home > WEBデザイン > WinIEで、リンクテキストの背景画像が :hover 状態になると、ちらついてしまう

WinIEで、リンクテキストの背景画像が :hover 状態になると、ちらついてしまう


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に期待するしかないのかな :(

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で動作が違います。
とのことですので、レンダリングエンジンが同じでもアプリケーションによって動作が違うのですね。これは見落としていました。
次からは検証対象に入れたいと思います。

Comment Form

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日記

Home > WEBデザイン > WinIEで、リンクテキストの背景画像が :hover 状態になると、ちらついてしまう

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top