168 votos

¿Firefox apoyo de la posición relativa de los elementos de la tabla?

Cuando trato de usar position: relative / position: absolute sobre <th> o <td> en Firefox no funciona.

168voto

DavidJonas Puntos 1600

Fácil y la manera más apropiada sería envolver el contenido de la celda en un div y agregar la posición:en relación a la div.

ejemplo:

<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>

33voto

Justin Niessner Puntos 144953

Que no debería ser un problema. Recuerde también se establece:

display: block;

13voto

mrbinky3000 Puntos 1604

Desde todos los navegadores, incluyendo Internet Explorer 7, 8 y 9 de manejar correctamente la posición relativa en la mesa-elemento de la pantalla y sólo FireFox maneja de forma incorrecta, su mejor apuesta es usar un JavaScript calza. Usted no debería tener que reorganizar el DOM sólo por una defectuosa del navegador. La gente usa JavaScript calzas todo el tiempo cuando IE se algo malo y todos los otros navegadores de hacer lo correcto.

Aquí es un completo anotado jsfiddle con todo el código HTML, CSS y JavaScript, explicó.

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Mi jsfiddle ejemplo anterior utiliza "Responsive Web Design" técnicas sólo para mostrar que va a trabajar con un diseño sensible. Sin embargo, el código no tiene que ser sensible.

Aquí está el JavaScript de abajo, pero no va a hacer mucho sentido fuera de contexto. Por favor, revise las jsfiddle enlace de arriba.

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

7voto

Han Dijk Puntos 956

Estoy recibiendo esta respuesta en mis resultados de google como yo busqué la "posición relativa" no funciona en las celdas de la tabla en Firefox. (sólo para alinear un elemento secundario dentro de la celda de la tabla) Mi solución fue poner un envoltorio div dentro de la td que me dio "position: relative". Esto no es dañar a su disposición de mesa como a la hora de poner "display: block" en la celda de la tabla.

7voto

Ben Johnson Puntos 1364

A partir de Firefox 3.6.13, position: relative/absolute no parecen funcionar en los elementos de la tabla. Este parece ser de larga data Firefox comportamiento. Consulte los siguientes: http://csscreator.com/node/31771

El CSS Creador de enlace de los puestos de la siguiente W3C referencia:

El efecto de la " posición relativa " en table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, y la tabla de la leyenda de los elementos no está definido. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X