HTML <tr> тег и позиция: относительная

Я имею дело с html writen давно, и есть проблема с FireFox.
Некоторые элементы tr имеют свойство position, заданное относительным, что на удивление делает границу этих tr invisble. Когда я удаляю стиль, все работает отлично... так что вопрос:
" Как позиция: относительный влияет на элемент 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;
}

Ответ 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

Взаимодействие, вероятно, та позиция: relative отключает свойство border-collapse. Конечно, не видя никакого кода, это довольно сложно сказать.

Обновление. Если вы посмотрите на свой код, вы увидите, что у рассматриваемого tr никогда не было собственной границы. Настройка position: relative влияет на отображение на th элементов. Я предлагаю вам положить это на неопределенное поведение.

Если вам нужно позиционировать строку относительно, то я предлагаю вам также изменить ее свойство отображения на одно подходящее для относительного позиционирования.

Ответ 3

Используйте преобразование вместо позиции:

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