2010-04-10 4 views
3

J'ai un certain nombre d'images sur une page contenue dans une image d'image-objet unique, ces images doivent être contenues dans l'image-objet unique en raison d'autres exigences du site. Alors que cela fonctionne très bien dans la plupart des navigateurs, j'ai un problème sur Opera Mini où il ne rend pas le sprite du tout et affiche simplement l'image entière.Sprite Repli

Existe-t-il des feuilles de style CSS pouvant être utilisées pour fournir une alternative de texte lorsque le navigateur ne parvient pas à afficher l'image-objet?

Répondre

1

Peu confus. Le sprite n'est pas rendu mais affiche l'image entière? Voyez-vous tous les sprites à la fois, ou pas du tout?

Vous pouvez utiliser la détection de navigateur pour Opera Mini (et tous les autres navigateurs mobiles où le rendu ne fonctionne pas comme prévu).

Ajoutez le texte souhaité à l'élément de sprite et utilisez un grand retrait de texte négatif pour masquer le contenu.

Désactiver les images de retrait et d'arrière-plan pour les navigateurs non pris en charge.

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; 
} 

Page

<div id="first_sprite" class="sprite">Alternate text</div>