1

2 つのスタイルが定義されています。

img.feedback-sprite-22{
    display:block;
    background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
    height:22px;
    border:0 !important; 
    padding:0; 
    margin:0 !important;
    z-index:0;
}

img.feedback-sprite-22:hover{
    background-position:0px -22px;
}

img.fb {
    display:inline; 
    margin:auto 0; 
    border: none !important; 
    vertical-align: middle;
}

そして、私はそのように画像を表示します:

<img class='fb feedback-sprite-22' height='22' width='65'>

ff と chrome では問題なく動作しますが、ie では動作しません (ie10 と ie8 をテストしました)。IEは画像を表示します（単純なグラデーションですか）が、四角いimgの欠落ボックスも表示します（以下を参照）。これを修正する方法はありますか？前もって感謝します。

ここに画像の説明を入力

4

3 に答える 3

3

必要なimgタグにsrcがないためです。

imgの代わりにdiv を使用します。cssで幅と高さを定義します。本当にcssを使ってやりたいのなら...<div class="fb feedback-sprite-22"></div>

しかし、私の意見では、<img src="/img/feedback-sprite-22.png" alt="">このような要素には css の background ではなく clear img - like を使用する必要があります。

于 2013-11-07T08:06:07.337 に答える
2

Choinekが指摘したように、私が発見した答えは、IMG明らかにIE用に「src」を定義する必要があるということです。それを blank.gif に割り当てましたが、すべて問題ありません。私はすでにこのサイトで blank.gif を使用しているので、別の画像を読み込む必要はありません。

ただし、CSS グラデーションを使用するというアイデアは非常に気に入っています。これにより、画像の数が減ります (常に良いことです)。

于 2013-11-07T08:24:33.910 に答える