CSS Positioning Absolute dentro de las celdas de la tabla no funciona en Firefox

Question

No puedo resolver este problema de posicionamiento en Firefox. No parece seguir la regla de posicionamiento absoluto. ¿Hay algo que estoy haciendo que no debería hacerse, pero algunos browesers lo manejan y otros no?

JS violín:

original - http://jsfiddle.net/g9qzh/

Actualizado - http://jsfiddle.net/g9qzh/2/

Obras en IE, Chrome, Safari, Opera

Aquí está el código real. Avíseme si no estoy siguiendo algún tipo de estándar que no conozca.

HTML:

<table> 
    <tr> 
     <td> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </td> 
    <tr> 
    <tr> 
     <td> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </td> 
    <tr> 
</table> 

CSS:

#two { 
    position: absolute; 
    top: 0; 
} 
td { 
    position: relative; 
} 

Mi única pista es que hay algún otro valor que debería asignar a td que causaría que funcione. Algunas otras preguntas de stackoverflow han mencionado a Firefox comportándose mal con esto, pero no he podido encontrar una respuesta. Intenté asignar valores superiores e izquierdos de cero, pero FF no se moverá.

Answer 1

Cambio Identificación de las clases y también se presentan como bloques arregla:

http://jsfiddle.net/GchWZ/

Es mejor y más "adecuada" para el usuario un div interior, aunque como citó de este post desbordamiento de pila: Does Firefox support position: relative on table elements?

<td> 
    <div style="position:relative"> 
     This will be positioned normally 
     <div style="position:absolute; top:5px; left:5px;"> 
      This will be positioned at 5,5 relative to the cell 
     </div> 
    </div> 
</td> 

Answer 2

está usando el ID de

identificadores son únicos. Use Clases si quiere reutilizar una asignación de estilo.

Answer 3

Aparte de la cuestión ID duplicado señalado por Brandt, asignando positioning to table cells is dodgy at best - me sorprende que funciona en cualquier navegador. Si tiene que usar una mesa, envolver los elementos que desea colocar en un div y asignar el div contenedor position: relative:

<table> 
    <tr> 
     <td> 
     <div class="wrapper"> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </div> 
     </td> 
    <tr> 
</table> 

CSS

#two { 
    position: absolute; 
    top: 0; 
} 
.wrapper { 
    position: relative; 
} 

Answer 4

Prueba esto:

<tr> 
    <td> 
     <div id="wrapper"> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div id="wrapper"> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </div> 
    </td> 
</tr> 

y para css:

#two { 
    position: absolute; 
    top: 0px; 
} 

#wrapper { 
    position: relative; 
} 

Answer 5

El problema proviene de cómo FF renderiza las tablas. Si configura sus TDs en display:inline-block;, debería mostrarse correctamente.

Answer 6

Existen motivos legítimos para usar la pantalla CSS: estilo de la mesa. Elimina los problemas que se muestran: bloquear y visualizar: el bloque en línea no se dirige.Estas razones ocupan un capítulo entero de un libro sobre el estilo CSS, así que no entraré aquí. Ese mismo libro también describe el problema del posicionamiento dentro de los elementos con ese tipo de visualización. Las especificaciones de CSS 2.1 simplemente no resuelven el problema y Mozilla ha elegido un curso que ignora los intentos de crear un contexto de posicionamiento con esos elementos. El posicionamiento de la tabla CSS está bien establecido, es una metodología madura, y no "poco fiable", solo requiere comprensión de sus límites, al igual que cualquier otro elemento CSS. Para diseños líquidos y otros diseños donde el tamaño del elemento es variable o desconocido, es indispensable para el espaciado y el posicionamiento vertical.

Se ha presentado una sugerencia en este hilo: cree un div dentro del elemento "table-cell" establecido en position: relative y utilícelo para el contexto de posicionamiento. El otro método es insertar otra tabla CSS dentro de esa celda y usarla para colocar elementos dentro de una grilla. El tercer método es envolver su tabla CSS dentro de otro elemento que crea un contexto de posicionamiento.

Answer 7

En caso de que desee colocar cosas en la parte superior y en la parte inferior de una celda, también en Firefox, lo hice funcionar haciendo la siguiente combinación de CSS y (desafortunadamente) jQuery.

1. Utilice un envoltorio div (div.inner) dentro de su td que tiene posición = estilo relativo en el td. Dentro del contenedor, agregué 2 divs que deben colocarse en la parte superior e inferior de la celda.

2. Posicionamiento en la parte superior (clase = inicio de intervalo) es gratis, mediante el posicionamiento de CSS.

3. La colocación del div.interval-end en la parte inferior se realiza a través de una secuencia de comandos, que agrega el estilo que se muestra en la imagen. Con td-alturas variables y el divisor de envoltura como 0-height por defecto, necesita una forma de decirle al elemento hasta dónde debe llegar hasta el final. El script es el siguiente:

    $("table .inner .interval-end").each(function() { 
         $(this).css({top: ($(this).parent().parent().height() - 10) + "px"}) 
        }).show() 
   

4. inicialmente I hizo que la div.interval-end invisible, establecer el estilo 'top', y luego hizo visible a través de jQuery show().

Espero que esto ayude a cualquiera que trate de lograr lo mismo. Avíseme si hay mejores métodos, especialmente si estos métodos no requieren secuencias de comandos. Por cierto: Intenté establecer el estilo de altura del envoltorio div.inner, pero se mete con el diseño de la tabla en Firefox.