ボタン画像の問題（CSS）

Question

は、これは私が作ったPayPalのスプライトのための私のCSS ..です以下

画像は、我々はFirefoxで何を得るのInternet Explorerで取得し、何を示している。..

コードへスプライトを表示することである：

.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を表示するためのコード（IN ternet ExplorerとFirefox）

スプライトがすべてのブラウザで完璧に動作しますが、あなたがIEでくだらない国境と左上の不足している画像アイコンの種類を見ることができます。クロムとSafariで 、同じほとんど（しかし、スプライトの上にaltテキストを示します）

Answer 1

は、あなたのinputタグにsrc属性を追加します。

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

はちょうどあなたがちょうどそれが正しいディレクトリにあることを確認します、それで何もする必要はありません blank.gifというファイルを作成します。

Answer 2

は、あなたのスプライトの画像入力を使用していない - それは必要として明らかにこのはは壊れたリンクアイコンが表示されるはずです（src -attrtibuteを介して設定された）イメージが含まれていますが、設定しないでください。 inputをa（リンク）またはボタン（type="button"またはtype="submit"）に置き換えることができます。後ではtype="image"と同じように、type="submit"がまだフォームを送信するので、何も変更せずに作業する必要があります（この場合、klicked x/y座標を知る必要はありません）。

一部のブラウザでは、入力画像にデフォルトで境界線があるため、境界線が表示されるだけです。を.ppspriteに設定するだけです（この場合は入力画像を使用しないでください）。