0

これは、私が作成したペイパルスプライトのCSSです。

以下の画像は、InternetExplorerで取得したものとFirefoxで取得したものを示しています。

スプライトを表示するコードは次のとおりです。

.ppsprite {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
 .ppsprite:hover {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px -100px transparent;
}

スプライトを表示するコード（html）

<input class="ppsprite" type="image" name="submit" alt="">

Screenpic（インターネットエクスプローラーとFirefox）

ここに画像の説明を入力してください

スプライトはすべてのブラウザで完全に機能しますが、IEでくだらない境界線と、左上にある種の欠落した画像アイコンが表示されます。クロームとサファリでは、ほとんど同じです（ただし、スプライトの上に代替テキストが表示されます）

4

2 に答える 2

1

スプライトに画像入力を使用しないでください。画像（ -attrtibuteで設定）が含まれている必要があるため、リンク切れアイコンが表示されるはずですが、設定しないでください。src多分あなたはinput（aリンク）またはボタン（type="button"またはtype="submit"）で置き換えることができます。type="submit"後者は、フォームを送信するのと同じように、他に何も変更せずに機能するはずですtype="image"（この場合、クリックされたx / y座標を知る必要はないと思います）。

一部のブラウザでは、デフォルトで入力画像に境界線があるため、境界線が表示されます-単に設定されborder:0;ています.ppsprite（ただし、前述のように、この場合は入力画像をまったく使用しないでください）。

于 2012-05-06T04:45:33.947 に答える
1

入力タグにsrc属性を追加します。

<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">

blank.gifというファイルを作成するだけです。何もする必要はありません。正しいディレクトリにあることを確認してください。

于 2012-05-06T04:48:14.037 に答える