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

Question

当我尝试使用position: relative/ position: absolute上<th>或<td>在Firefox它似乎并没有工作.

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

从最近的发布历史来看,这可以在2014年5月开始提供.我几乎无法抑制我的兴奋!

编辑(2014年10月6日): 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