El bloque en línea no funciona en Internet Explorer 7, 6
Tengo este código CSS con extensión inline-block. ¿Alguien puede decirme cómo hacerlo funcionar en Internet Explorer 6 y 7. ¿Alguna idea? ¿Quizás 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 }
En IE6/IE7, display: inline-blocksolo funciona en elementos que están naturalmente en línea (como spans).
Para que funcione en otros elementos como divs, necesitas esto:
#yourElement {
display: inline-block;
*display: inline;
zoom: 1;
}
*display: inlineutiliza un truco de CSS "seguro" para aplicar solo a IE7 y versiones inferiores .
Para IE6/7, zoom: 1proporciona hasLayout . Tener un "diseño" es un requisito previo para display: inline-blockfuncionar siempre.
Es posible aplicar esta solución mientras se mantiene CSS válido, pero realmente no vale la pena pensar en ello, especialmente si ya está utilizando propiedades con prefijo de proveedor.
Lea esto para obtener más información display: inline-block(pero olvídese -moz-inline-stack, eso solo era necesario para el ahora antiguo Firefox 2).
*display:inlineFunciona bien como hack de IE7 . Pero puedes agregar zoom:1al 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; digamos, por ejemplo, que los elementos de la lista no aparecerán en la pantalla. Entonces, en tales casos, esto funciona muy bien y aparece como en otros navegadores.
