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的devtools中，尽管它在“样式”部分中显示为relative，但在“计算”中实际显示为static。因此，我的猜测是由于某种原因，position伪指令只是被忽略了。但问题是我看不到任何原因... 希望你们有一些想法:) 谢谢!!

Answer 1

感谢您的所有回答！我必须找到另一种解决方法。实际上，div作为table或tbody元素的直接子元素是错误的。因此，最终，为了使其完全兼容，我不得不将其移出table并将其放入容器中。现在一切正常！

为什么在Safari和歌剧的devtools中将“ position：relative”计算为“ position：static”？

1 个答案: