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-block
solo funciona en elementos que están naturalmente en línea (como span
s).
Para que funcione en otros elementos como div
s, necesitas esto:
#yourElement {
display: inline-block;
*display: inline;
zoom: 1;
}
*display: inline
utiliza un truco de CSS "seguro" para aplicar solo a IE7 y versiones inferiores .
Para IE6/7, zoom: 1
proporciona hasLayout . Tener un "diseño" es un requisito previo para display: inline-block
funcionar 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:inline
Funciona bien como hack de IE7 . Pero puedes 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; 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.