3

1つのスプライト画像に含まれるページに多数の画像があります。サイトの他の要件により、これらの画像は1つのスプライトに含まれている必要があります。

これはほとんどのブラウザで正常に機能していますが、Opera Miniで問題が発生し、スプライトがまったくレンダリングされず、画像全体が表示されるだけです。

ブラウザがスプライトをレンダリングできないときに代替テキストを提供するために使用できるCSSはありますか？

4

1 に答える 1

1

ちょっと混乱。スプライトはレンダリングされていませんが、画像全体が表示されていますか? すべてのスプライトが一度に表示されますか、それともまったく表示されませんか?

Opera mini (およびレンダリングが期待どおりに機能しないその他のモバイル ブラウザー) には、ブラウザー検出を使用できます。

目的のテキストをスプライト要素に追加し、大きな負のテキスト インデントを使用してコンテンツを非表示にします。

サポートされていないブラウザーのインデントと背景画像を無効にします。

allbrowsers.css

div.sprite {
  width:20px;
  height:20px;
  background:transparent url(img/mysprites.gif) no-repeat scroll top left;
  overflow:hidden;
  text-indent:-5000px;
}
#first_sprite {
  background-position:20px 40px;
}

mobilebrowsers.css

div.sprite {
  background-image:none;
  text-indent:0;
}

ページ

<div id="first_sprite" class="sprite">Alternate text</div>
于 2010-04-10T22:46:59.413 に答える