imagen Fondo CSS sin mostrar en IE7 única

Question

El html es:

<div class="choose-os"> 
<p> 
    <a href="someLink" class="windows">Microsoft Windows</a> 
    <a href="someOtherLink" class="macos">Apple Mac OS</a> 
</p> 
</div> 

El CSS es:

.choose-os { 
    margin: 20px 0; 
    padding: 20px; 
    background: #e7eefa; 
} 
.choose-os p { 
    margin: 0; 
} 
.choose-os p a { 
    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 p a:hover { 
    background-position: 0 -56px; 
} 

Cualquier sugerencia sería muy apreciada como tener la imagen de fondo también aparecen en IE7.

Answer 1

El text-indent: -100000px; en combinación con inline-block es lo que causa 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 inline-block en absoluto, consulte a continuación esta solución más adecuada).

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

.choose-os p a { 
    display: inline-block; 
    height: 56px; 
    width: 308px; 

    text-indent: -100000px; 

    /* for ie7 */ 
    *text-indent: 0; 
    *font-size: 0; 
    *line-height: 0 
} 

que utiliza el *property: value hackear varias veces para ocultar el texto en IE7.

---

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

Por lo tanto, otra solución (que yo prefiero a mi anterior) es:

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

Answer 2

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 here.

Answer 3

Para mostrar inline-block correctamente en IE7, añadir los siguientes estilos de .choose-os p a

zoom:1 
*display:inline 

(La estrella es importante! Ha ignorado por los navegadores modernos, pero no IE6/7)

IE7 no lo hace Respete el bloque en línea, por lo que debe 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/

[editar] Si el texto-guión es también parte del culpable, puede ser mejor de pegarse con display:block y el establecimiento de float:left en sus elementos. Probablemente múltiples rutas válidas para tomar :)