Элемент теряет липкую позицию при наведении курсора в MS Edge - PullRequest
Новая
       72

Элемент теряет липкую позицию при наведении курсора в MS Edge

1 голос
/ 07 мая 2020

Второй заголовок таблицы показывает другой элемент при наведении курсора. Проблема в том, что при наведении курсора он теряет фиксированную позицию в MS Edge, и элемент застревает при прокрутке таблицы. Он отлично работает в Chrome и Firefox.

Я обнаружил, что он работает, если html не включает DOCTYPE, я не знаю, актуален ли он. 

td, th {
  padding: 5px 15px;
}

th {
  position: sticky;
  top: 0;
  background: black;
  color: white;
}

th:hover .disp{
  display: inline;
}

.disp {
  display: none;
  position: relative;
}

.container {
  height: 180px;
  overflow: scroll;
}
  <body>
    <div class="container">
      <table id="tableId" height="360">
        <thead>
         <tr>
          <th><input type="checkbox" /></th>
          <th>Size<div class="disp">hi</div></th>
          <th>File</th>
         </tr>
        </thead>
        <tbody>
         <tr>
          <td><input type="checkbox" /></td>
          <td>103Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>12Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>14Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
        </tbody>
       </table>
    </div>
  </body>

1 Ответ

2 голосов
/ 07 мая 2020

Я протестировал проблему с устаревшим браузером MS Edge 44.18362.449.0 и вижу ее там.

enter image description here

Я проверяю код и это выглядит как position: absolute; в .disp классе, вызывающем эту проблему.

Я проверил документацию, но не получил никакой информации об этом поведении.

Если вы установите position как relative или stati c, проблема может быть решена. Вы можете использовать его как обходной путь для этой проблемы.

Код: 

td, th {
  padding: 5px 15px;
}

th {
 position: sticky;
  top: 0;
  background: black;
  color: white;
}

th:hover .disp{
  display: block;
  align-items: center;
}

.disp {
  display: none;
  position: relative;
  right: 8px;
  top: 8px;
}

.container {
  height: 180px;
  overflow: scroll;
}
 <div class="container">
      <table id="tableId" height="360">
        <thead>
         <tr>
          <th><input type="checkbox" /></th>
          <th>Size<div class="disp">hi</div></th>
          <th>File</th>
         </tr>

        </thead>
        <tbody>
         <tr>
          <td><input type="checkbox" /></td>
          <td>103Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>12Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>14Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
        </tbody>
       </table>
    </div>

Вывод:

enter image description here

Редактировать:

Если вы установите display: inline-table; . Это поможет решить проблему, и оба элемента будут отображаться в одной строке.

Вывод:

enter image description here

...