Question

很久以前我正在处理html写作，而且FireFox存在问题一些tr元素的position属性设置为relative，这令人惊讶地使这些tr的边界不可见。当我删除样式时，一切正常......所以问题是：
“位置：相对如何影响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;
}

Answer 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。

Answer 2

交互可能就是这个位置：relative是禁用border-collapse属性。当然，在没有看到任何代码的情况下，很难说清楚。

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

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

Answer 3

使用变换代替位置：

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

HTML标记和位置：相对

3 个答案: