3

このコードを使用して、スプライト駆動のアイコンを表示しています (グラフィックスが利用可能な場合はアイコンのみが表示され、他のデバイスではテキストが役立つはずです):

マークアップ:

<span class="icon ok">OK</span>

CSS:

.icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px 0px no-repeat; }
.ok { background-position: -16px 0px; }

スプライト自体はどのブラウザーでも正常に動作しますが、オーバーフローと組み合わせたパディングが想定どおりに機能しないため、何らかの理由でテキストが Opera と Chrome に表示されます。

これを改善する方法はありますか？前もって感謝します....

4

3 に答える 3

4

画像を見えないように移動して非表示にする標準的な方法は、text-indent:-9999emまたは同様のものを使用することです。Opera では非常に大きくする必要があり、ems はフォント サイズの変更に合わせてスケーリングされるため、うまく機能します。また、line-height:0; font-size:0;余分なスペースを追加したい場合がある ie を設定することをお勧めします。を使用する場合、テキストを非表示にするためにパディングは必要ありませんtext-indent。

于 2010-07-15T19:26:13.110 に答える
2

代わりに負の text-indent を試してください。

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }
于 2010-07-15T19:25:41.977 に答える
1

アイコン (16x16 ボックス) だけが必要なのか、説明テキスト付きのアイコンが必要なのかわかりません。とにかく、16x16 ボックスだけが必要な場合は、テキストを非表示にすることができます。

.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }
于 2010-07-15T19:25:12.803 に答える