IEでマウスオーバーすると画像がちらつく

画像をtext-indentで置き換えしてロールオーバーというのはもうCSSテクニックとしてもよく使われていますが　Internet Exprolerでマウスオーバーすると画像がちらつく現象が時々webサイトを拝見していて見受けられます。そんなマウスオーバーのちらつきの対処法。

直せますから大丈夫。

AタグにCSSで画像を設定しているケース

A　タグに画像を置き換えているだけだとHoverで違う画像に置き換えた場合　画像がちらつきます。よく使われるlistタグで説明します。

<ul>
<li>hogeA</li>
<li>hogeB</li>
<li>hogeC</li>
<ul>

CSSで画像に置き換える場合の間違ったケース

ul{
    list-style:none;
    width:***px;
}
li a{
    list-style:none;
    padding-left:**px;
    background:url(sampleA.gif) no-repeat center left;
}
li a:hover{
    list-style:none;
    padding-left:**px;
    background:url(sampleB.gif) no-repeat center left;
}

ちらつきを直す場合

ul{
    list-style:none;
    width:***px;
}
li, li a{
    list-style:none;
    padding-left:**px;
    background:url(sampleA.gif) no-repeat center left;
}
li a:hover{
    list-style:none;
    padding-left:**px;
    background:url(sampleB.gif) no-repeat center left;
}

上記のようにlist自体にも画像を設定しましょう。ちなみにFirefoxだとちらつかないです。