display: inline-block et text-indent

Je rencontre un problème avec le code suivant dans certaines versions d'Internet Explorer:display: inline-block et text-indent

#iconautente{ 
background-image:url('/style/images/spritecommon.png'); /*icona_utente.png*/ 
background-position:-117px -15px; 
text-indent:-9000px; 
width:20px; 
height:23px; 
display:inline-block; 
} 

<a id="iconautente" href="/admin/index.php">admin</a>

Dans Firefox, IE7 et IE8 sous Vista, je vois fond et aucun texte , comme prévu. Dans IE6 et IE8 sous XP, l'image entière est en retrait, pas de texte, donc l'image n'est pas affichée.

Quel devrait être le bon comportement? Y at-il un travail autour?

Source

2010-03-05 Daniele Cruciani

utilisant admin et la durée de #iconautente {text-indent: -9000px;} fonctionne, mais le texte-tiret bloc entier indent-block indent, texte non contenu. Que dit la norme? –

* html #iconautente{text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie6 hack */ 

*:first-child+html #iconautente{ text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie7 hack */

Source

2010-03-18 09:49:15

Je viens de réaliser que la taille de police et la hauteur de ligne font l'affaire de ne pas montrer le texte ... thanx –

Le texte est toujours affiché dans le navigateur Chrome, dans un très petite taille de police (cela ressemble à une traînée de points). –

@ HalilÖzgür Ceci est censé être un hack pour IE6/7 et peut avoir des comportements inattendus dans les nouveaux navigateurs. Je recommanderais un retrait de texte négatif combiné avec un débordement caché dans les navigateurs modernes, et ce hack pour les anciens MSIE. –

~~probablement~~ Internet Explorer ne supporte pas display: inline-block; dans les versions inférieures à 7 et seulement en partie 7. Pourquoi utilisez-vous pas display:block;?

Source

2010-03-05 11:55:04

Pour être précis, 'inline-block' n'est pris en charge que dans les versions inférieures à 8 si la propriété' display' d'origine est 'inline'. – casraf

original une étiquette est en ligne. Parce qu'avec display: block; ne pas correctement aligner verticalement l'élément, et l'alignement vertical n'a aucun effet –

vous pouvez peut-être essayer comme ceci:

 
.blk { display:inline-block; height:96px; width:96px; text-indent:-9999px; *text-indent:0; *font-size:0; *line-height:0; *overflow:hidden; }

voir la démo http://jsfiddle.net/zhiyelee/4aRZa/

Source

2011-10-02 16:45:00 zhiyelee

En ce qui me concerne c'est un bug dans les anciennes versions de MSIE et il faut un tel bidouillage pour le résoudre. Pourquoi compromettre les nouvelles normes de conformité avec les anciens navigateurs? Le retrait de texte casse les éléments en ligne (en ligne) avec des dimensions appliquées. Vous pouvez définir la taille de la police comme zéro dans les navigateurs les plus récents avec le même résultat (aucun hack n'est nécessaire) mais le retrait de texte est ma méthode préférée pour masquer le texte. –

Pour corriger moi-même: Font-size ne se comporte pas de la même manière dans tous les navigateurs modernes, utilisez si possible le texte, et remplacez-le en utilisant IE6 ou 7. Aussi, pour ceux qui ne sont pas au courant: cette réponse est la même que réponse acceptée, mais utilise un hack sélecteur qui cible à la fois IE6 et 7. Je préfère cette méthode parce que c'est moins de code. –

display: inline-block et text-indent

Répondre

Questions connexes