HTML <tr> 标签和位置：相对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6746175/
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
HTML <tr> tag and position:relative
提问by Andrew
I am dealing with html writen long time ago and there is a problem with FireFox.
Some tr elements have position property set to relative , which surprisingly makes the border of those tr's invisble. When I remove the style, it all works fine... so the question is:
"How does position:relative affect tr element?" I can't get it.. for me it seems redundant.
我正在处理很久以前写的 html，FireFox 有问题。
一些 tr 元素将 position 属性设置为 relative ，这令人惊讶地使那些 tr 的边框不可见。当我删除样式时，一切正常......所以问题是：
“ position:relative 如何影响 tr 元素？”我无法理解......对我来说这似乎是多余的。
Thanks
谢谢
EDIT:
编辑：
<table id="table1" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#cccccc"><tbody>
<tr class="header" style="position:relative;top:2 px;">
<th>sdf</th>
<th>sdf</th>
<th>sdf</th>
</tr>
.header {
position:relative;
}
table#table1 {
border-collapse: collapse;
}
#table1 th {
border-collapse: collapse;
cursor: pointer;
font-size: 8pt;
padding: 3px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
color: #FFFFFF;
background-color: #6685C2;
}
#table1 td {
border-collapse: collapse;
cursor: pointer;
font-size: 8pt;
padding: 3px;
border: 1px solid #666666;
}
回答by thirtydot
I'm also not entirely sure without seeing code, but:
如果没有看到代码，我也不完全确定，但是：
From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position
来自规范：http: //www.w3.org/TR/CSS21/visuren.html#propdef-position
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.
'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响未定义。
tris a table-row.
tr是一个table-row。
回答by Marcin
The interaction is probably that position:relative is disabling the border-collapse property. Of course, without seeing any code, it's pretty difficult to tell.
交互可能是 position:relative 禁用边框折叠属性。当然，在没有看到任何代码的情况下，很难判断。
Update: If you look at your code you will see that the tr in question never has a border of its own. Setting position: relativeaffects display on the thelements. I suggest that you put this down to undefined behaviour.
更新：如果您查看您的代码，您会发现所讨论的 tr 从来没有自己的边框。设置position: relative会影响th元素上的显示。我建议你把这归结为未定义的行为。
If you need to position the row relatively, then I suggest that you also change it's display property to one appropriate for relative positioning.
如果您需要相对定位行，那么我建议您也将其显示属性更改为适合相对定位的属性。
回答by holden321
Use transform instead of position:
使用变换代替位置：
.header {
transform: translateY(2px);
}
