icônes CSS avec un texte sémantique, browsercompatibility émet

Question

Je suis en utilisant ce code pour afficher des sprites icônes entraîné (si les graphiques ne sont disponibles que les icônes doivent apparaître, pour d'autres appareils le texte est censé aider):

balisage:

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

le lutin lui-même fonctionne très bien dans un navigateur, mais le texte apparaît dans Opera et Chrome pour quelque raison que le rembourrage en con juction avec débordement: caché ne fonctionnera pas comme supposé.

Des idées comment cela pourrait-il être amélioré? Merci d'avance ....

Answer 1

La méthode standard d'images cacher en les déplaçant hors de la vue est d'utiliser text-indent:-9999em ou similaire. Il doit vraiment être très grand pour Opera et ems, car ils évolueront avec n'importe quel changement de taille de police. Aussi, c'est une bonne idée de définir line-height:0; font-size:0; pour ie qui aime parfois ajouter de l'espace supplémentaire. Vous ne devriez pas avoir besoin du rembourrage pour cacher le texte si vous utilisez text-indent.

Answer 2

Je ne sais pas si vous avez juste besoin d'icône (boîte 16x16) ou une icône avec un texte descriptif. De toute façon, si vous avez juste besoin de 16x16 boîte, vous pouvez masquer le texte juste par

.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; } 

Answer 3

Essayez plutôt le texte négatif.

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }