Firefox支持表格元素上的相对位置吗？
当我尝试在Firefox的<th>或<td>上使用position: relative / position: absolute ，它似乎不起作用。
简单和最合适的方法是将单元格的内容封装在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: block;
由于包括Internet Explorer 7,8和9在内的每个Web浏览器都能正确处理位置：相对于表格显示元素，只有FireFox处理错误，所以最好使用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(); } });
从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今天发布。 很快，桌面定位将不会成为主要桌面浏览器的问题
从Firefox 3.6.13开始，位置：相对/绝对似乎不适用于表格元素。 这似乎是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：relative'的作用未定义。 http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
尝试使用display:inline-block在Firefox 11中为我工作，给我定位td / th内的能力，而不会破坏表格的布局。 与position:relative在td / th上的position:relative应该使事情发挥作用。 刚刚得到它自己的工作。
我有一个table-cell元素（这实际上是一个DIV不是TD ）
我替换了
display: table-cell; position: relative; left: .5em
（在Chrome中工作）
display: table-cell; padding-left: .5em
当然，填充通常会被添加到盒子模型的宽度中，但是当涉及到绝对宽度时，表格总是有自己的想法 – 所以这对于某些情况是有效的。
添加显示：阻止父元素得到了这个工作在Firefox。 我也不得不添加顶部：0px; 左：0像素; 到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/
