为什么在 Safari 和 Opera 的开发工具中，"位置:相对"被计算为"位置:静态&

Question

我创建了一个html表来显示每小时的时间表。在<tbody>标记中，我添加了一个<div>，该绘制一条表示当前时间并使用 JS 定位的水平线。它在Chrome和Firefox上完美运行，因为时间线定位良好。但不幸的是，它不适用于Opera或Safari。

Safari 12.1.1 和 Opera 60.0.3255.170 会出现此问题。

以下是我的html的摘录：

<table>
<thead>
<tr>
<th class="hour"></th>
<th> John Steed </th>
<th> Emma Peel </th>
</tr>
</thead>
<tbody>
<div class="time"></div>
<tr>
<td class="hour">9am</td>
<td>Somme appointment</td>
<td></td>
</tr>
<tr>
<td class="hour">10am</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="hour">11am</td>
<td></td>
<td>Somme appointment</td>
</tr>
<tr>
<td class="hour">12pm</td>
<td>Somme appointment</td>
<td>Somme appointment</td>
</tr>
</tbody>
</table>

这是我的 scss：

table {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
tbody {
position: relative;
.time {
position: absolute;
top: 0;
height: 1px;
width: 100%;
color: #ff5722;
background-color: #ff5722;
&:before {
content: 'Now';
}
&.hidden {
display: none;
}
}
tr {
height: 109px;
td {
border-top: 1px #a8a8a8 dashed;
}
&:nth-of-type(2n) {
background-color: #fafafa;
}
&:hover {
background-color: #ededed;
}
}
}
th {
padding: 1rem 25px;
text-align: center;
border-top: 1px #a8a8a8 solid;
position: relative;
}
th, td {
border-left: 1px #a8a8a8 solid;
border-right: 1px #a8a8a8 solid;
width: 200px;
&.hour {
width: 75px;
padding-right: 1rem;
vertical-align: top;
border: none;
text-align: right;
}
}
} 

在我的 css 中，定位被标记为相对的，但我注意到在 Opera 和 Safari 的开发工具中，虽然它在"样式"部分中显示为relative，但在"计算"中它实际上显示为static。所以我的猜测是，由于某种原因，position指令被简单地忽略了。但问题是我看不出任何原因... 希望你们有一些想法:) 谢谢！！

Answer 1

感谢您的所有回答！我必须找到另一种解决方法来修复它。事实上，div作为table或tbody元素的直接子元素是有缺陷的。所以最终，为了使它完全兼容，我不得不把它从我的table里移出来，放在一个容器里。 现在它工作正常！