display: inline-ब्लॉक और पाठ-इंडेंट

Question

मैं इंटरनेट एक्सप्लोरर के कुछ संस्करणों में निम्न कोड के साथ एक समस्या का सामना कर रहा हूँ:

#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> 

फ़ायरफ़ॉक्स, IE7 और IE8 विस्टा के अंतर्गत में, मैं देख रहा हूँ पृष्ठभूमि और कोई पाठ , जैसा सोचा था। एक्सपी के तहत आईई 6 और आईई 8 में, पूरी छवि इंडेंट है, टेक्स्ट नहीं, इसलिए छवि दिखाई नहीं दे रही है।

सही व्यवहार क्या होना चाहिए? क्या आसपास कोई काम है?

Answer 1

* 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 */ 

Answer 2

शायद इंटरनेट एक्सप्लोरर 7 नीचे संस्करणों में display: inline-block; और केवल आंशिक रूप से 7 में समर्थन नहीं कर रहा है तुम क्यों display:block; का उपयोग नहीं करते?

Answer 3

शायद आप इस तरह की कोशिश कर सकते हैं:

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

डेमो http://jsfiddle.net/zhiyelee/4aRZa/