html - 为什么 `position:relative` 在 safari 和 opera 的开发工具中被计算为 `position: static`？

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 并将其放在一个容器中。 现在一切正常!