很久以前我正在处理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;
}
答案 0 :(得分:66)
如果没有看到代码,我也不完全确定,但是:
来自规范: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
。
答案 1 :(得分:5)
交互可能就是这个位置:relative是禁用border-collapse属性。当然,在没有看到任何代码的情况下,很难说清楚。
更新:如果你查看你的代码,你会发现有问题的tr从来没有自己的边框。设置position: relative
会影响th
元素的显示。我建议你把它归结为未定义的行为。
如果你需要相对定位行,那么我建议你也将它的显示属性改为适合相对定位的属性。
答案 2 :(得分:0)
使用变换代替位置:
.header {
transform: translateY(2px);
}