HTML标记和位置:相对

时间:2011-07-19 11:07:12

标签: html css firefox

很久以前我正在处理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;
}

3 个答案:

答案 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元素未定义。

trtable-row

答案 1 :(得分:5)

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

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

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

答案 2 :(得分:0)

使用变换代替位置:

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