CSS Firefox 是否支持位置：相对于表格元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5148041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does Firefox support position: relative on table elements?
提问by Ben Johnson
When I try to use position: relative/ position: absoluteon a <th>or <td>in Firefox it doesn't seem to work.
当我尝试在 Firefox或Firefox上使用position: relative/ 时position: absolute，它似乎不起作用。<th><td>
采纳答案by DavidJonas
Easy and most proper way would be to wrap the contents of the cell in a div and add position:relative to that div.
简单且最正确的方法是将单元格的内容包装在 div 中并添加 position:relative 到该 div。
example:
例子：
<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>
回答by Justin Niessner
That should be no problem. Remember to also set:
那应该没问题。记得还要设置：
display: block;
回答by mrbinky3000
Since every web browser including Internet Explorer 7, 8 and 9 correctly handle position:relative on a table-display element and only FireFox handles this incorrectly, your best bet is to use a JavaScript shim. You shouldn't have to rearrange your DOM just for one faulty browser. People use JavaScript shims all the time when IE gets something wrong and all the other browsers get it right.
由于包括 Internet Explorer 7、8 和 9 在内的每个 Web 浏览器都正确处理位置：相对于表显示元素，并且只有 FireFox 处理不正确，因此最好的办法是使用 JavaScript 垫片。你不应该只为一个有问题的浏览器重新排列你的 DOM。当 IE 出错而所有其他浏览器都正确时，人们总是使用 JavaScript shims。
Here is a completely annotated jsfiddle with all the HTML, CSS, and JavaScript explained.
这是一个完全注释的 jsfiddle，其中解释了所有 HTML、CSS 和 JavaScript。
http://jsfiddle.net/mrbinky3000/MfWuV/33/
http://jsfiddle.net/mrbinky3000/MfWuV/33/
My jsfiddle example above uses "Responsive Web Design" techniques just to show that it will work with a responsive layout. However, your code doesn't have to be responsive.
我上面的 jsfiddle 示例使用“响应式网页设计”技术只是为了表明它可以与响应式布局一起使用。但是，您的代码不必具有响应性。
Here is the JavaScript below, but it won't make that much sense out of context. Please check out the jsfiddle link above.
这是下面的 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();
}
});
回答by aebabis
Starting with Firefox 30, you'll be able use positionon table components. You can try for yourself with the current nightly build (works as standalone): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
从 Firefox 30 开始，您将能够position在表格组件上使用。您可以尝试使用当前的夜间构建（独立工作）：http: //ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
Test case (http://jsfiddle.net/acbabis/hpWZk/):
测试用例（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>
You can continue to follow the developers' discussion of the changes here (the topic is 13 yearsold): https://bugzilla.mozilla.org/show_bug.cgi?id=63895
您可以继续按照开发者的，这里的变化讨论（题目为13多年的老）：https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Judging by recent release history, this could be available as soon as May 2014. I can barely contain my excitement!
从最近的发布历史来看，这可能会在 2014 年 5 月上市。我几乎无法抑制我的兴奋！
EDIT (6/10/14):Firefox 30 was released today. Soon, table positioning won't be an issue in major desktop browsers
编辑（2014 年 6月 10 日）：今天发布了 Firefox 30。很快，主要桌面浏览器中的表格定位将不再是问题
回答by Ben Johnson
As of Firefox 3.6.13, position: relative/absolute do not seem to work on table elements. This seems to be long standing Firefox behaviour. See the following: http://csscreator.com/node/31771
从 Firefox 3.6.13 开始， position: relative/absolute 似乎不适用于表格元素。这似乎是长期存在的 Firefox 行为。请参阅以下内容：http: //csscreator.com/node/31771
The CSS Creator link posts the following W3C reference:
CSS Creator 链接发布了以下 W3C 参考：
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
'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
回答by Jonathan Dorsey
Try using display:inline-blockit worked for me in Firefox 11 giving me positioning capability within the td/th without destroying the layout of the table. That in conjunction with position:relativeon a td/th ought to make things work. Just got it working myself.
尝试display:inline-block在 Firefox 11 中使用它为我提供了在 td/th 内定位的能力，而不会破坏表格的布局。结合position:relativetd/th 应该可以使事情正常进行。刚刚让它自己工作。
回答by Simon_Weaver
I had a table-cellelement (which was actually a DIVnot a TD)
我有一个table-cell元素（实际上DIV不是 a TD）
I replaced
我换了
display: table-cell;
position: relative;
left: .5em
(which worked in Chrome) with
（在 Chrome 中工作）与
display: table-cell;
padding-left: .5em
Of course padding usually is added to width in the box model - but tables always seem to have a mind of their own when it comes to absolute widths - so this will work for some cases.
当然，填充通常会添加到盒子模型中的宽度上——但是当涉及到绝对宽度时，表格似乎总是有自己的想法——所以这适用于某些情况。
回答by Ben
The accepted solution kind of works, but not if you add another column with more content in it than in the other one. If you add height:100%to your tr, td & div then it should work.
接受的解决方案类型有效，但如果您添加另一列的内容比另一列的内容多，则无效。如果你添加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>
The only problem is that this only fixes the column height problem in FF, not in Chrome and IE. So it's a step closer, but not perfect.
唯一的问题是，这只修复了FF中的列高问题，在Chrome和IE中没有。所以它更近了一步，但并不完美。
I updated a the fiddle from Jan that wasn't working with the accepted answer to show it working. http://jsfiddle.net/gvcLoz20/
我更新了 Jan 的小提琴，该小提琴不适用于接受的答案以表明它有效。 http://jsfiddle.net/gvcLoz20/
回答by GrantE
Adding display:block to the parent element got this working in firefox. I also had to add top:0px; left:0px; to the parent element for Chrome to work. IE7, IE8, & IE9 are working as well.
将 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>
