display: inline-block e text-trattino

sto sperimentando un problema con il seguente codice in alcune versioni di Internet Explorer:display: inline-block e text-trattino

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

In Firefox, IE7 e IE8 sotto Vista, vedo sfondo e nessun testo , come previsto. In IE6 e IE8 sotto XP, l'intera immagine è rientrata, non il testo, quindi l'immagine non viene mostrata.

Quale dovrebbe essere il comportamento corretto? C'è una soluzione?

fonte

2010-03-05 Daniele Cruciani

utilizzando admin e arco #iconautente {text-trattino: -9000px;} funziona, ma il testo-trattino blocco intero del rientro del blocco in linea, testo non contenuto. Cosa dice lo standard? –

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

fonte

2010-03-18 09:49:15

Mi sono appena accorto che font-size e line-height fanno il trucco di non mostrare il testo ... thanx –

Il testo è ancora visualizzato nel browser Chrome, in un dimensioni ridotte del font (sembra una scia di punti). –

@ HalilÖzgür Si tratta di un attacco per IE6/7 e potrebbe comportare comportamenti imprevisti nei nuovi browser. Vorrei raccomandare un indent di testo negativo combinato con overflow nascosto nei browser moderni e questo hack per MSIE più vecchi. –

~~presumibilmente~~ Internet Explorer non supporta display: inline-block; nelle versioni inferiori a 7 e solo parzialmente in 7. Perché non si utilizza display:block;?

fonte

2010-03-05 11:55:04

Per essere precisi, 'inline-block' è supportato solo nelle versioni inferiori a 8 se la proprietà' display' originale è 'inline'. – casraf

originale un tag è in linea. Perché con display: block; non allineare correttamente l'elemento verticale e l'allineamento verticale non ha effetto –

forse si può provare in questo modo:

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

vedere la demo http://jsfiddle.net/zhiyelee/4aRZa/

fonte

2011-10-02 16:45:00 zhiyelee

Per quanto mi riguarda, questo è un bug nelle versioni precedenti di MSIE e richiede una modifica come questa da risolvere. Perché compromettere gli standard più recenti per la conformità con i browser più vecchi? Il rientro del testo interrompe gli elementi in linea (blocco in linea) con le quote applicate. Puoi impostare la dimensione del carattere come zero anche nei nuovi browser con lo stesso risultato (non occorrono trucchi) ma il rientro del testo è il metodo preferito per nascondere il testo. –

Per correggere me stesso: Font-size non si comporta allo stesso modo in tutti i browser moderni, quindi usa il text-indent quando possibile, e sostituiscilo quando usi IE6 o 7. Inoltre, per coloro che non lo sanno: questa risposta è la stessa del risposta accettata, ma utilizza un hack selector che si rivolge sia a IE6 che a 7. Preferisco questo metodo perché è meno codice. –

display: inline-block e text-trattino

risposta

Problemi correlati