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

这应该没问题。记住还要设置:

display: block;

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

CSS Creator 链接提供以下 W3C 参考:

对于 table-row-group、 table-header-group、 table-footer-group、 table-row、 table-column-group、 table-column、 table-cell 和 table-caption 元素，未定义“ position: relant”的效果

最简单和最正确的方法是将单元格的内容包装在一个 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>

尝试使用 display:inline-block，它在 Firefox 11中为我提供了在 td/th 内的定位能力，而不会破坏表的布局。结合 position:relative在一个时间点应该可以让事情运转起来。我自己刚修好。

向父元素添加 display: block 可以在 firefox 中工作。 我还必须为 Chrome 的父元素添加 top: 0px; left: 0px; 。 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>

由于包括 Internet Explorer 78和9在内的每个 web 浏览器都能正确处理表显示元素上的相对位置，而且只有火狐能正确处理这个位置，所以最好的办法就是使用 JavaScript 垫片。您不应该为了一个错误的浏览器而重新排列 DOM。当 IE 出现错误而其他浏览器都正确的时候，人们总是使用 JavaScript 垫片。

下面是一个完整的带注释的 jsfiddle，其中解释了所有的 HTML、 CSS 和 JavaScript。

Http://jsfiddle.net/mrbinky3000/mfwuv/33/

我上面的 jsfiddle 示例使用了“响应式网页设计”技术，只是为了说明它可以与响应式布局一起工作。但是，您的代码不必是响应的。

下面是 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();


}


});

我有一个 table-cell元素(实际上是 DIV而不是 TD)

我替换了

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

(可以在 Chrome 中使用)

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

当然，在盒子模型中，通常会在宽度上添加填充——但是当涉及到绝对宽度时，表格似乎总是有自己的想法——所以在某些情况下这会起作用。

从 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月上市。我几乎无法抑制自己的兴奋！

编辑(6/10/14) : Firefox 30今天发布了，很快桌面浏览器中的桌面位置将不再是一个问题