Question

当我尝试在Firefox中的position: relative或position: absolute上使用<th> / <td>时，它似乎无效。

Answer 1

简单且最恰当的方法是将单元格的内容包装在div中并添加位置：相对于该div。

示例：

<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

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

display: block;

Answer 3

由于每个Web浏览器（包括Internet Explorer 7,8和9）都正确处理位置：相对于表格显示元素并且只有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();

    }

});

Answer 4

从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

从recent release history来看，这可以在2014年5月开始提供。我几乎无法忍受我的兴奋！

EDIT（6/10/14）： Firefox 30今天发布。很快，桌面定位在主要桌面浏览器中不会出现问题

Answer 5

从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

Answer 6

尝试使用display:inline-block它在Firefox 11中为我工作，在td / th内为我提供定位功能，而不会破坏表的布局。这与td / th上的position:relative一起应该使事情有效。让它自己工作。

Answer 7

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

我替换了

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

（在Chrome中有效）

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

当然，填充通常会添加到框模型中的宽度 - 但是当涉及到绝对宽度时，表似乎总是有自己的想法 - 所以这适用于某些情况。

Answer 8

添加display：block到父元素，这在firefox中运行。我还必须添加顶部：0px;左：0像素;到Chrome的父元素工作。 IE7，IE8和＆amp; 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>

Answer 9

已接受的解决方案类型有效，但如果您添加的内容中包含的内容多于另一列，则不会。如果您将height:100%添加到 tr ，td＆amp;然后它应该工作。

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

Firefox是否支持位置：相对于表元素？

9 个答案: