display: inline-block para IE, y los demas navegadores
| Estas leyendo el articulo display: inline-block para IE, y los demas navegadores. Publicado el 20/10/2009 Tambien pueden interesarte estos articulos: Los gadgets de las tribus tecnologicas Logos web 2.0 para escribir La mejor manera de afrontar las colas del lunes Predicciones sobre Google para el 2009 Posts relacionados con thumbnails |
Estaba yo muy contento con la diagramacion de un listado generado dinámicamente en donpresupuesto.com. Pero de golpe me vengo a enterar que el display: inline-block no funciona en Internet Explorer. Y todo se fue al carajo. Las 5 columnas de localidades (Que pueden ver, por ejemplo en la pagina de reformas en a coruña) se transformaba en una sola, tan pero tan, fea que daba lastima.
Tenia dos opciones, meter un poco mas de código php, para generar divs con ese contenido dinamico y luego posicionarlos con float o algo asi, o buscar una forma de que mi listado funcione como yo esperaba. PHP se bastante, pero quería buscar una forma de hacerlo solo con css. Por suerte en Internet hay de todo. Una búsqueda y lo encontre.
Básicamente consiste en agregar unas lineas al css que hacen que se muestre el bien en todos los navegadores. No es un display: inline-block puro pero logramos que se muestre como esperamos.
Solo tuve que agregar estas lineas:
display: -moz-inline-stack; /* FF2*/
vertical-align: top; /* BASELINE CORRECCIÓN*/
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE */
_height: 20px; /* IE6 */
Lo que me dejo el código asi:
#footer ul li{
display: inline-block;
width: 165px;
margin: 0 0 3px 0;
color: #757575;
display: -moz-inline-stack; /* FF2*/
vertical-align: top; /* BASELINE CORRECCIÓN*/
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE */
_height: 20px; /* IE6 */
}
Y con eso ya deje todo funcionando…
