display: inline-block y de texto guión

estoy experimentando un problema con el código siguiente en algunas versiones de Internet Explorer:display: inline-block y de texto guión

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

En Firefox, IE7 e IE8 en Windows Vista, veo de fondo y no hay texto , como se esperaba. En IE6 e IE8 bajo XP, toda la imagen está sangrada, no texto, por lo que la imagen no se muestra.

¿Cuál debería ser el comportamiento correcto? ¿Hay alguna solución?

Fuente

2010-03-05 Daniele Cruciani

usando admin y vuelta #iconautente {text-indent: -9000px;} funciona, pero el texto-guión bloque entero de sangrado de bloque entero, texto no contenido. ¿Qué dice el estándar? –

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

Fuente

2010-03-18 09:49:15

Me acabo de dar cuenta de que el tamaño de letra y la altura de línea hacen el truco de no mostrar texto ... thanx –

El texto se sigue mostrando en el navegador Chrome, en un tamaño de letra pequeño (parece un rastro de puntos). –

@ HalilÖzgür Esto se entiende como un hack para IE6/7 y puede tener comportamientos inesperados en los navegadores más nuevos. Recomendaría un texto de sangría negativo combinado con el desbordamiento oculto en los navegadores modernos, y este truco para el MSIE más antiguo. –

~~presumiblemente~~ Internet Explorer no está apoyando display: inline-block; en versiones inferiores a 7 y sólo en parte en 7. ¿Por qué no utilizar display:block;?

Fuente

2010-03-05 11:55:04

Para ser precisos, 'inline-block' solo se admite en versiones inferiores a 8 si la propiedad' display' original es 'inline'. – casraf

original, una etiqueta está en línea. Porque con display: bloque; no alinear correctamente el elemento vertical, y la alineación vertical no tiene efecto –

tal vez usted puede tratar de esta manera:

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

ver la demostración http://jsfiddle.net/zhiyelee/4aRZa/

Fuente

2011-10-02 16:45:00 zhiyelee

En lo que a mí respecta, esto es un error en las versiones anteriores de MSIE y requiere un truco como este para solucionarlo. ¿Por qué comprometer estándares más nuevos para el cumplimiento con navegadores antiguos? La sangría de texto rompe los elementos en línea (en línea) con las dimensiones aplicadas. También puede establecer el tamaño de la fuente como cero en los navegadores más nuevos con el mismo resultado (no es necesario hackear), pero el método preferido para ocultar el texto es la sangría de texto. –

Para corregirme a mí mismo: el tamaño de fuente no se comporta del mismo modo en todos los navegadores modernos, así que use sangrías de texto cuando sea posible y anulelas cuando use IE6 o 7. Además, para aquellos que no lo saben: esta respuesta es la misma que respuesta aceptada, pero utiliza un hack selector que se dirige a IE6 y 7. Prefiero este método porque es menos código. –

display: inline-block y de texto guión

Respuesta

Cuestiones relacionadas