Display inline-block e internet explorer.

La propiedad display de css (en la versión 2.1), puede contener un valor muy interesante, inline-block. Con este valor conseguimos que el elemento con esa propiedad se comporte como una caja, pero mostrandose en la misma línea, como si tuviese display: inline.

¿Y esto de qué nos sirve?, pues si no usamos esta propiedad tendríamos que añadirle a la caja un "float: left", por ejemplo, pero esto trae unas consecuencias, a veces, muy molestas. Por ejemplo, si queremos mostrar contenido dividido en cajas y que se muestren filas de 3 cajas, si éstas varían con la altura, pasaría esto:

con float

Esto pasa porque al tener "float:left", las cajas "buscan" el primer espacio disponible a su izquierda. Ésto podría solucionarse desde el html, añadiendo cada tres cajas un elemento que tenga la propiedad "clear:both". Pero si queremos que el número de cajas por fila varíe dependiendo de la anchura de nuestra ventana del navegador, ya no valdría esta solución. Además si usamos la propiedad "display: inline-block", podemos alinear las cajas arriba, abajo, al centro , con tan solo cambiar la propiedad vertical-align. Si ponemos "vertical-align:top", tendremos esto:

con float

Hacks para conseguir "display: inline-block" en internet explorer 6 y 7

Nuestros amigos Ie6 e Ie7, como siempre, mostrandonos su tecnología punta (recordemos que ésto es CSS 2.1), no implementan esta propiedad completamente.

De todas formas es muy sencillo hacerlo funcionar con un pequeño truco. En vez de usar "display: inline-block", tendríamos que ponerles "display: inline" y añadirles la propiedad "zoom:1"

	div.block {
		display: inline-block;
		#display: inline;
		_display: inline;
		zoom: 1;
	}

La "#" es un hack para que solo aplique esa propiedad IE7 y el "_" para IE6. La propiedad zoom solo la cojeran esos 2 navegadores, puesto que no es estándar, haciendo que el elemento se comporte como una caja.

Ver ejemplo en funcionamiento.
con float

Comentarios

Comentario de Ana - 23 de Febrero de 2012 - 17:33
Creo que tienes un error, como dices, hay que aplicar el inline+ zoom en IE7, pero en el ejemplo, has puesto para el IE7 (#) inline-block; debería ser así: display: inline-block; #display: inline; _display: inline; zoom: 1;
Comentario de Imaginanet - 23 de Febrero de 2012 - 18:13
Ya está corregido. Muchas gracias.
Comentario de Edgar Valencia - 19 de Mayo de 2012 - 04:48
Excelente!
Comentario de Elias Mamani - 05 de Julio de 2012 - 16:24
perfecto ! funciono de maravillas, Gracias.
Comentario de jrcsdev - 14 de Julio de 2012 - 10:59
Excelente tip! acabo de utilizarlo. tenía ratos intentando solucionar este problema. Saludos y Gracias
Comentario de ferran - 10 de Agosto de 2012 - 12:50
pero usando esto el espaciado automatico que te hace el display:inline-block no funciona correctamente, los box se ponen uno pegados con los otros
Comentario de Fernando Flores - 10 de Agosto de 2013 - 02:02
Muchas gracias, me ha servido de mucho
Comentario de zas - 29 de Agosto de 2013 - 09:44
muchas gracias Cracksss!!!
Comentario de Max - 16 de Julio de 2014 - 02:45
Gracias amigo me ha servido mucho.
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí