0

PHPスクリプトでdivに設定されたクラスに応じて、スプライト背景画像の2つの背景位置のいずれかを持つdivがあります。

以下の CSS は、標準のブラウザーでは問題なく動作しますが、iPad では同じように表示されません。代わりに、必要以上に背景画像が表示されます。下の画像からわかるように、1 つの星だけでなく、別の星の一部も見えています。

iPadで背景の位置/画像を正しく表示するにはどうすればよいですか?

.normal, .favourite {
    width:18px;
    height:17px;
    margin-right: 4px;
    border:none;
    cursor: pointer;
    display:inline-block;
    vertical-align: middle;
    background-color:transparent;
    background-repeat: no-repeat;
}

.normal {
    background-image: url('/images/playlist_sprite.png');
    background-position: left bottom;
}

.favourite {
    background-image:url('/images/playlist_sprite.png');
    background-position: right bottom;
}

ここに画像の説明を入力

4

1 に答える 1

0

左/右/下を使用して背景位置を定義するのではなく、ピクセルを使用して正確に定義してみてください。

例えば

background-position: XXpx XXpx;

また、スプライト内の両方の画像が正確に 18px x 17px であることを確認してください。これは、クラスが画像サイズになると言っているものです。

于 2012-08-15T11:35:44.643 に答える