Unterstützt Firefox Position: relativ zu Tabellenelementen?

Wenn ich versuche, position: relative/ zu verwendenposition: absolute auf einem <th>oder <td>in Firefox zu verwenden, scheint es nicht zu funktionieren.

Der einfachste und am besten geeignete Weg wäre, den Inhalt der Zelle in ein Div zu wickeln und eine Position hinzuzufügen: relativ zu diesem Div.

Beispiel:

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

Das sollte kein Problem sein. Denken Sie daran, auch festzulegen:

display: block;

Da jeder Webbrowser, einschließlich Internet Explorer 7, 8 und 9, die Position korrekt behandelt: relativ zu einem Tabellenanzeigeelement und nur FireFox dies falsch behandelt, ist es am besten, ein JavaScript-Shim zu verwenden. Sie sollten Ihr DOM nicht nur für einen fehlerhaften Browser neu anordnen müssen. Die Leute verwenden ständig JavaScript-Shims, wenn der IE etwas falsch macht und alle anderen Browser es richtig machen.

Hier ist eine vollständig kommentierte jsfiddle mit allen erklärten HTML-, CSS- und JavaScript-Elementen.

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

In meinem obigen jsfiddle-Beispiel werden "Responsive Web Design" -Techniken verwendet, um zu zeigen, dass es mit einem responsiven Layout funktioniert. Ihr Code muss jedoch nicht reagieren.

Hier ist das JavaScript unten, aber es wird aus dem Kontext nicht so viel Sinn machen. Bitte überprüfen Sie den jsfiddle-Link oben.

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

    }

});

Ab Firefox 30 können Sie positionTabellenkomponenten verwenden. Sie können es mit dem aktuellen nächtlichen Build selbst versuchen (funktioniert als Standalone): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

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

Sie können die Diskussion der Entwickler über die Änderungen hier weiter verfolgen (das Thema ist 13 Jahre alt): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Gemessen an der jüngsten Veröffentlichungshistorie könnte dies bereits im Mai 2014 verfügbar sein. Ich kann meine Aufregung kaum eindämmen!

BEARBEITEN (10.06.14): Firefox 30 wurde heute veröffentlicht. Bald wird die Tabellenpositionierung in großen Desktop-Browsern kein Problem mehr sein

Ab Firefox 3.6.13 scheint position: relative / absolute bei Tabellenelementen nicht zu funktionieren. Dies scheint ein langjähriges Firefox-Verhalten zu sein. Siehe Folgendes: http://csscreator.com/node/31771

Der CSS Creator-Link enthält die folgende W3C-Referenz:

Die Auswirkung von 'position: relative' auf Tabellenzeilengruppen-, Tabellenkopfzeilengruppen-, Tabellenfußzeilengruppen-, Tabellenzeilen-, Tabellenspaltengruppen-, Tabellenspalten-, Tabellenzellen- und Tabellenbeschriftungselemente ist nicht definiert. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Versuchen Sie, display:inline-blockes in Firefox 11 zu verwenden, damit ich es innerhalb von td / th positionieren kann, ohne das Layout der Tabelle zu zerstören. Das in Verbindung mit position:relativeeinem td / th sollte die Dinge zum Laufen bringen. Ich habe es gerade selbst zum Laufen gebracht.

Ich hatte ein table-cellElement (das eigentlich DIVkein warTD )

ich ersetzte

display: table-cell;
position: relative;
left: .5em

(was in Chrome funktioniert hat) mit

display: table-cell;
padding-left: .5em

Natürlich wird die Polsterung normalerweise im Box-Modell zur Breite hinzugefügt - aber Tabellen scheinen immer einen eigenen Sinn zu haben, wenn es um absolute Breiten geht - daher funktioniert dies in einigen Fällen.

Durch Hinzufügen von display: block zum übergeordneten Element funktioniert dies in Firefox. Ich musste auch top hinzufügen: 0px; links: 0px; auf das übergeordnete Element, damit Chrome funktioniert. IE7, IE8 und IE9 funktionieren ebenfalls.

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

Die akzeptierte Lösung funktioniert, aber nicht, wenn Sie eine weitere Spalte mit mehr Inhalt als in der anderen hinzufügen. Wenn Sie height:100%zu Ihrem tr , td & div hinzufügen , sollte es funktionieren.

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        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>
</tr>

Das einzige Problem ist, dass dies nur das Problem mit der Spaltenhöhe in FF behebt, nicht in Chrome und IE. Es ist also einen Schritt näher, aber nicht perfekt.

Ich habe die Geige von Jan aktualisiert, die nicht mit der akzeptierten Antwort funktioniert hat, um zu zeigen, dass sie funktioniert. http://jsfiddle.net/gvcLoz20/