почему `позиция: относительная` вычисляется как` позиция: статическая` в devtools для сафари и оперы? - PullRequest
Новая
       26

почему `позиция: относительная` вычисляется как` позиция: статическая` в devtools для сафари и оперы?

1 голос
/ 27 июня 2019

Я создал 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, но я заметил, что в devtools для Opera и Safari, хотя оно отображается relative в разделе «Стили», в «Вычисляемом» оно фактически показано static. Поэтому я предполагаю, что по какой-то причине директива position просто игнорируется. Но проблема в том, что я не вижу причин, почему ... Надеюсь, у вас есть идеи :) Спасибо !!

1 Ответ

0 голосов
/ 02 июля 2019

Спасибо за все ваши ответы! Я должен был найти другой способ исправить это. На самом деле div неисправен как прямой потомок элемента table или tbody. В конце концов, чтобы сделать его полностью совместимым, мне пришлось вынуть его из моего table и поместить в контейнер. Теперь работает нормально!

...