Imagen CSS de fondo que no se muestra solo en IE7

El html es:

 

El CSS es:

 .choose-os { margin: 20px 0; padding: 20px; background: #e7eefa; } .choose-os p { margin: 0; } .choose-os pa { display: inline-block; text-indent: -100000px; height: 56px; width: 308px; } .choose-os p a.windows { background: url(../images/button-windows-bg.png) 0 0; } .choose-os p a.macos { background: url(../images/button-macos-bg.png) 0 0; } .choose-os pa:hover { background-position: 0 -56px; } 

Cualquier sugerencia sería muy apreciada ya que la imagen de fondo también aparecerá en IE7.

El text-indent: -100000px; en combinación con inline-block es lo que está causando que los dos elementos no sean visibles en IE7, debido a un error.

Necesita encontrar alguna otra forma de ocultar el texto para IE7 (o no usar en absoluto el inline-block en inline-block , consulte a continuación esta solución más adecuada).

Las opciones incluyen el método en el comentario de @Sotiris o:

 .choose-os pa { display: inline-block; height: 56px; width: 308px; text-indent: -100000px; /* for ie7 */ *text-indent: 0; *font-size: 0; *line-height: 0 } 

Que usa la *property: value hack varias veces para ocultar el texto en IE7.


El problema parece estar relacionado con el uso de la display: inline-block .

Entonces, otra solución ( que prefiero a la anterior ) es:

 .choose-os { margin: 20px 0; padding: 20px; background: #e7eefa; overflow: hidden } .choose-os pa { float: left; margin-right: 4px; text-indent: -100000px; height: 56px; width: 308px; } 

Para mostrar correctamente el inline-block en inline-block en IE7, agregue los siguientes estilos a .choose-os pa

 zoom:1 *display:inline 

(¡La estrella es importante! Es ignorada por los navegadores modernos, pero no por IE6 / 7)

IE7 no respeta el bloque en línea, por lo que debes hacer un poco de magia para que funcione. Hay una gran descripción aquí: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[edit] Si text-indent también es parte del culpable, puede ser mejor que sigas con display:block y configurar float:left en tus elementos. Probablemente múltiples caminos válidos para tomar 🙂

IE7 tiene algunas limitaciones serias en CSS. Recomendaría evitar la notación abreviada y declarar explícitamente cada propiedad, luego validar la hoja CSS aquí .