El bloque en línea no funciona en Internet Explorer 7, 6

Question

Tengo este código CSS con inline-block. ¿Alguien puede decirme cómo hacer que funcione en Internet Explorer 6 y 7. ¿Alguna idea? Tal vez estoy haciendo algo mal? ¡Gracias!

#signup { 
    color:#FFF; 
    border-bottom:solid 1px #444; 
    text-transform:uppercase; 
    text-align:center; 
} 
#signup #left { 
    display: inline-block 
} 
#signup #right { 
    background-image:url(images/signup.jpg); 
    border-left: solid 1px #000; 
    border-right: solid 1px #000; 
    display: inline-block; 
    padding:1% 2% 
    width:16%; 
} 
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold } 
#signup a:hover { color:#FFF; text-decoration:underline } 

Answer 1

En IE6/IE7, display: inline-block sólo funciona en elementos que son naturalmente inline (tales como span s).

Para hacer que funcione en otros elementos como div s, necesita esto:

#yourElement { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 

*display: inline utiliza un truco CSS "seguro" para aplicar a only IE7 and lower.

Para IE6/7, zoom: 1 proporciona hasLayout. Tener un "diseño" es un requisito previo para que display: inline-block funcione siempre.

Es posible aplicar esta solución manteniendo un CSS válido, pero realmente no vale la pena pensar en ello, especialmente si ya está utilizando las propiedades con prefijo de un proveedor.

Read this para obtener más información sobre display: inline-block (pero olvídese de -moz-inline-stack, que solo era necesario para el ahora antiguo Firefox 2).

Answer 2

*display:inline funciona bien como IE7 hack. Pero puede agregar zoom:1 al código como *background:#fff; *display:inline; zoom:1. Aquí, puedes poner tu código de color de fondo. En algún momento, no verá el diseño en la pantalla, por ejemplo, los elementos de la lista no aparecerán en la pantalla. Entonces, en tales casos, esto funciona muy bien y aparece como lo hace en otros navegadores.