HTML <tr> 标签和位置：相对答案

【问题标题】：HTML <tr> tag and position:relativeHTML <tr> 标签和位置：相对
【发布时间】：2011-10-08 10:31:40
【问题描述】：

我正在处理很久以前编写的 html，FireFox 有问题。
一些 tr 元素的 position 属性设置为 relative ，这令人惊讶地使这些 tr 的边框不可见。当我删除样式时，一切正常......所以问题是：
“position:relative 对 tr 元素有何影响？”我无法理解.. 对我来说这似乎是多余的。

谢谢

编辑：

<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;
}

【问题讨论】：

我无法复制它：jsfiddle.net/ABd9J。在 Firefox 5/Windows 7 上，有position: relative 和没有position: relative 的边框。你确定你给了我们正确的代码吗？
抱歉，我已经更新了上面的代码。现在它可以被复制，从 tr 中删除样式和类。
根据您的指示，复制它：jsfiddle.net/ABd9J/3
我还发现当我删除元素的背景颜色时，边框变得生动......对此有什么想法吗？
table { border-collapse: separate } 适合我

标签： html css firefox

【解决方案1】：

没有看到代码我也不能完全确定，但是：

来自规范：http://www.w3.org/TR/CSS21/visuren.html#propdef-position

'position:relative' 对 table-row-group 的影响， table-header-group, table-footer-group, table-row, table-column-group, table-column、table-cell 和 table-caption 元素未定义。

tr 是 table-row。

【讨论】：

也许有人不同意这个规范:(

【解决方案2】：

交互可能是 position:relative 禁用了边框折叠属性。当然，没有看到任何代码，也很难分辨。

更新：如果您查看您的代码，您会发现有问题的 tr 从来没有自己的边框。设置position: relative 会影响th 元素的显示。我建议您将其归结为未定义的行为。

如果您需要相对定位该行，那么我建议您也将其显示属性更改为适合相对定位的属性。

【讨论】：

我已经发布了代码。请注意，当我删除 position:relative 时，边框变得可见。

【解决方案3】：

使用变换而不是位置：

.header {
    transform: translateY(2px);
}

【讨论】：