Problema de Firefox con pantalla: absoluto en una celda de tabla

Question

He encontrado un problema al usar contenido absolutamente posicionado dentro de un elemento td. El elemento td no se reconoce como un elemento posicionado, por lo que el contenido se posiciona con relación al body. Este problema solo está en Firefox y el diseño esperado está visible en otros navegadores: jsfiddle.

Haciendo un poco de investigación parece que el problema está relacionado con FireFox usando display:table-cell como el tipo de pantalla predeterminado para las celdas de la tabla. Puedo resolver el problema cambiando la pantalla a block o agregando un contenedor div para actuar como un contenedor posicionado al contenido.

¿Hay alguna razón para evitar cambiar el tipo de pantalla de la celda a block? Preferiría usar este método en lugar de agregar elementos adicionales para corregir un problema en un navegador.

Este no es el mismo problema descrito en div style absolute in a table cell o Why "display: table-cell" is broken when "position: absolute".

Answer 1

Si configura la pantalla de la celda en block, se envolverá en una celda de tabla anónima. El árbol de cuadro de CSS resultante es el mismo que si creó un <div> dentro de la celda y establece todos los estilos y atributos de la celda en ese bloque.

Esto podría estar bien para muchos propósitos. Se romperá si la celda tiene un rowspan o colspan (porque esos no significan nada en los bloques) o si la celda tiene estilos de borde que espera que formen parte del colapso de borde o si tiene dos de esas celdas una al lado de la otra (porque entonces los dos bloques se envolverán en una sola celda de tabla , no en dos celdas de tabla separadas). Probablemente haya otras situaciones en las que el comportamiento será inesperado. Pero si tiene suficiente control sobre los estilos y el contenido y no está aplicando demasiado estilo a la celda, esto funcionará.

Answer 2

¿Intentó establecer explícitamente la posición del TD como relativa?

Esto debería restablecer el posicionamiento. En realidad, es un comportamiento correcto lo que está obteniendo, y no debería estar relacionado solo con TD, pero ya sabe, los navegadores son divertidos.

Para más detalles acerca de por qué es necesario establecer explícitamente, comprobar:
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

..

Actualización:

Esta respuesta sugiere tratando una opción. Está escrito antes que la respuesta aceptada, y no se elimina solo por razones de archivo y ya que es otra posibilidad relacionada para los que vienen desde los motores de búsqueda para un problema similar pero no el mismo. Aprecio tu comprensión.