inline-block cross-browser

En Foo Hack publicaron un recurso CSS que a veces utilizo y creo que estaría bien compartir, el problema es que no explican para qué sirve hacer lo que explican, y eso es lo que voy a hacer.

Hay tres valores principales para el atributo display de CSS; normal, block e inline-block.

  • El primero no modifica el formato del contenedor al que se aplica, es decir, si es un div y se deja el display normal seguirá ocupando el 100% del ancho que disponga del contenedor padre.
  • El segundo si lo modifica, puede usarse por ejemplo para enlaces, para hacer que el enlace ocupe un tamaño determinado y se pueda hacer click en toda la zona que ocupa visualmente, no sólo en el texto. Esto es quizá dificil de entender pero con un par de ejemplos es más fácil: los enlaces de la cabecera de Facebook a día de hoy podrían estar hechos con display:inline-block; por que el enlace ocupa un tamaño determinado y para pulsarlo no hace falta que el click se haga en el mismo texto del enlace. Si el display fuera normal, el enlace sólo serviría desde la zona de texto, si se hace click fuera no serviría de nada.
  • display:block sirve para eso, pero puede que no siempre sea lo que se quiere hacer. El valor block posiciona los elementos uno encima del otro, y pocas veces se quiere hacer eso. Lo más normal es que se coloquen uno al lado del otro hasta que llegue al limite de ancho y entonces haga una fila nueva. Para eso se hizo el display:inline-block.

El problema es que en bastantes navegadores el valor inline-block simplemente no existe (en todos los nuevos funciona sin problemas) y ante la duda parece comportarse como un block. Pero hay una forma de que funcione bien en “todos” los navegadores (lo pongo entre comillas por que en Explorer 3, 4.01, 5.01 o 5.55 ni lo he probado). Sólo hay que utilizar estos valores y el hack * para algunos explorers.

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Aunque yo soy de los que piensa que lo mejor es no dejar acceder a la aplicación a quienes no actualizan su navegador, entiendo que haya quien utiliza navegadores antiguos por razones extrañas; por eso siempre van bien este tipo de “hacks” que ensucian el código y frenan la mejora de la web.




Josep Viciana

Programador de 28 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

3 comentarios

Pues a mí no me gustan los hacks de ningún tipo, si se entiende por “hack” el poner código que es entendido por unos navegadores pero no por otros.

El caso que comentas, de construir por ejemplo un menú con varios enlaces tipo “bloque”, lo resuelvo dandoles estilo “display:block”, y luego “float:left”. De esta forma, se me ponen todos en fila de izquierda a derecha 😉

Espero que a alguien le sea útil.
Puede verse un ejemplo en una de mis páginas, en donde siempre utilizo este método:

http://www.elgrandia.de/cuentosymusica

está de más decir que para acabar de darle un “aspecto de botón” a los enlaces tipo bloque, es recomendable darles estilos a los bordes y al color de fondo 😉

Un saludo!
SERGI

Hola Sergi. El “hack” que comento está en la linea 4, que empieza con un asterisco y eso hace que sólo lo interprete Internet Explorer.

Y sí, a veces con float:left puede ir bien, es verdad, va bien saberlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *