Fait Firefox support position : relative sur les éléments de tableau ?

Question

Lorsque j’essaie d’utiliser / sur un ou dans Firefox, il ne semble pas fonctionner.

Answer 1

Simple et la plus appropriée consisterait pour encapsuler le contenu de la cellule dans un div et ajouter position : relative à la div.

exemple :

Answer 2

Qui devrait poser aucun problème. N’oubliez pas de mettre aussi :

Answer 3

Depuis tout navigateur internet, y compris Internet Explorer 7, 8 et 9 de gérer correctement la position:relative sur une table-affichage de l'élément et seulement FireFox gère cela de manière incorrecte, votre meilleur pari est d'utiliser un JavaScript cale. Vous ne devriez pas avoir à réorganiser votre DOM juste pour un défectueuse navigateur. Les gens utilisent JavaScript cales tout le temps quand IE obtient quelque chose de mal et tous les autres navigateurs.

Ici est complètement annoté jsfiddle avec tout le HTML, CSS et JavaScript expliqué.

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

Mon jsfiddle exemple ci-dessus utilise le "Responsive Web Design" techniques juste pour montrer que cela fonctionne avec un réactif de mise en page. Cependant, votre code n'a pas à être réactif.

Voici le code JavaScript ci-dessous, mais il ne fera pas beaucoup de sens hors contexte. S'il vous plaît vérifier le jsfiddle lien ci-dessus.

$(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();

    }

});

Answer 4

À partir de Firefox 30, vous serez en mesure d'utiliser position sur les composants de la table. Vous pouvez essayer par vous-même avec l'actuel nightly build (qui fonctionne de manière autonome): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Cas de Test (http://jsfiddle.net/acbabis/hpWZk/):

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

Vous pouvez continuer à suivre les développeurs discussion des changements ici (le sujet est de 13 ans vieux): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

À en juger par la récente publication de l'histoire, cela pourrait être disponible dès Mai 2014. J'ai peine à contenir mon excitation!

EDIT (6/10/14): Firefox 30 a été publié aujourd'hui. Bientôt, table de positionnement ne sera pas un problème dans les principaux navigateurs de bureau

Answer 5

Comme de Firefox 3.6.13, position: relative/absolue ne semble pas fonctionner sur les éléments de la table. Cela semble être de longue date, Firefox comportement. Voir la suivante: http://csscreator.com/node/31771

Le CSS Créateur de lien les postes suivants du W3C référence:

L'effet d'une "position:relative" sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table, colonne, table-cell, et de la table-caption éléments n'est pas défini. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme