Tabla de CSS, problema de altura de celda de tabla en Firefox

Question

Para empezar, tengo ejemplos y código here (un sitio que sigo jugando con cosas). Este es el enlace real por si acaso: http://www.williamrosmus.com/examples/calendar1_wf.html

Este es un problema que tengo específicamente con Firefox (estoy usando v3.6), y me pregunto qué está pasando. Requonc muestra razonablemente e IE8 perfectamente.

Para un ejercicio de aprendizaje, creé manualmente un calendario en xhtml usando tablas CSS en lugar de etiquetas html tradicionales. Establecí el alto y el ancho para que las celdas sean 100px por 100px. Sin embargo, las filas superior e inferior, donde algunas de las celdas están vacías, se muestran demasiado altas en Firefox.

¿Alguna sugerencia o comentario sobre cómo solucionar esto para mostrar correctamente o qué está pasando con Firefox?

Saludos,

BillR

Además de esto, de acuerdo con la sugerencia de Robin, que registra esto como un error en mozilla.org. Alguien acaba de confirmarlo allí. En caso de que a alguien le interesa:

https://bugzilla.mozilla.org/show_bug.cgi?id=634489

Answer 1

sólo se adhieren   el interior de las celdas vacías?

Acabo de probar, y esto lo corrige en Firefox.

---

I found a page que habla un poco más sobre el problema que está teniendo.

Sugiere una alternativa CSS; table { empty-cells: show }, ver:

https://developer.mozilla.org/en/CSS/empty-cells

Sin embargo, esto no parece ayudar en Firefox con sus <div> etiquetas con display: table-cell.

Answer 2

Creo que esto es un error en Gecko. Arrastré por Bugzilla (https://bugzilla.mozilla.org/) pero no pude encontrar ninguna otra persona que informara esto. Probablemente valga la pena archivar un error con un testcase reducido (o solo un enlace en el actual) para ver lo que los desarrolladores hacen de él.

En cuanto a una solución específica, la sugerencia de thirtydot de   es probablemente su mejor opción.

Answer 3

Cuando cambié la visualización de div.calendar_day a "inline-block" o "block" en lugar de table-cell y float añadido: left la altura se procesó correctamente.

Answer 4

Consulte la discusión en https://bugzilla.mozilla.org/show_bug.cgi?id=634489 y https://bugzilla.mozilla.org/show_bug.cgi?id=569645 para más detalles. (Sin embargo, el uso de 'vertical-align: top' o 'vertical-align: bottom' en todas las celdas de la tabla debería ser una solución razonable)