Google
 

lunes, 23 de febrero de 2009

display:inline-block para todos los navegadores.

La propiedad CSS display dispone de una buena lista de posible valores ( inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit) para indicar que tipo de elemento estamos posicionando. Dos de las más usadas son inline y block .

display:inline
Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque.

Elementos Inline por defecto:
a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.

display:block
Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto

Elementos de bloque por defecto:
address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

display:inline-block
En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.

display:inline-block
En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.
En Mozilla Webdev nos muestran un ejemplo de como conseguir que todos los navegadores nos permite obtener diseños como estos sin necesidades usar float en ellos.

Código
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack; /* FF2*/
display: inline-block;
vertical-align: top; /* BASELINE CORRECCIÓN*/
margin: 5px;
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE */
_height: 250px; /* IE6 */
}

Fuente: anieto2k.com

1 comentario:

Tom dijo...

Muchas gracias por este hint, me estbaa volviendo loco para hacer andar un listado de productos hecho con divs inline-block en IE

puse las lineas que me faltaban y anduvo de una