Firefox支持表元素上的position：relative吗？

当我尝试在或Firefox中使用position: relative/时position: absolute，它似乎不起作用。<th><td>

最简单，最正确的方法是将单元格的内容包装在div中，并添加相对于该div的position:。

例：

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

那应该没问题。记住还要设置：

display: block;

由于包括Internet Explorer 7、8和9的每个Web浏览器都可以正确处理position：相对于表显示元素的位置，而只有FireFox会错误地处理此问题，因此，最好的选择是使用JavaScript填充程序。您不必只为一个错误的浏览器重新排列DOM。当IE出现错误而其他所有浏览器都正确时，人们一直在使用JavaScript填充。

这是一个完全注释的jsfiddle，其中解释了所有HTML，CSS和JavaScript。

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

我上面的jsfiddle示例使用“响应式Web设计”技术只是为了表明它将与响应式布局一起使用。但是，您的代码不必具有响应性。

这是下面的JavaScript，但从上下文上讲并没有太大意义。请查看上面的jsfiddle链接。

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

    }

});

从Firefox 30开始，您将可以position在表格组件上使用。您可以尝试使用当前的每夜构建（独立运行）：http : //ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

测试案例（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>

您可以继续按照开发者的，这里的变化讨论（题目为13 多年的老）：https://bugzilla.mozilla.org/show_bug.cgi?id=63895

从最近的发布历史来看，该版本可能会在2014年5月推出。我激动不已！

编辑（14/10/14）： Firefox 30今天发布。很快，在主要的桌面浏览器中，表格定位将不再是问题

从Firefox 3.6.13开始，position：relative / absolute似乎不适用于表格元素。这似乎是长期存在的Firefox行为。请参阅以下内容：http : //csscreator.com/node/31771

CSS Creator链接发布了以下W3C参考：

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素的影响未定义。http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

尝试使用display:inline-block它在Firefox 11中对我有效，从而在不破坏表格布局的情况下为我提供了在td / th之内的定位功能。与position:relativetd / th 相结合应该可以使事情正常。自己搞定就可以了。

我有一个table-cell元素（实际上DIV不是TD）

我更换了

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

（适用于Chrome）

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

当然，通常在框模型中将填充添加到宽度中-但是在涉及绝对宽度时，表似乎总是有自己的想法-因此，在某些情况下这是可行的。

将display：block添加到父元素可以在Firefox中正常工作。我还必须添加top：0px; 左：0px; 到父元素以使Chrome正常工作。IE7，IE8和IE9也在正常工作。

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

可接受的解决方案是可行的，但是如果您添加的另一列内容比另一列更多，则不会。如果添加height:100%到tr，td和div，那么它应该可以工作。

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

唯一的问题是，这只能解决FF中的列高问题，而不能解决Chrome和IE中的问题。因此，这距离更近了，但并不完美。

我更新了Jan的小提琴，该小提琴无法使用已接受的答案来证明它是有效的。 http://jsfiddle.net/gvcLoz20/