元素在 MS Edge 中悬停时失去粘性位置

Question

第二个 table header 悬停时显示另一个元素。问题是，当悬停时，它会失去在 MS Edge 中的粘性位置，并且当滚动 table 时元素会卡住。它在 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>

Answer 1

我用 MS Edge 旧版浏览器 44.18362.449.0 测试了这个问题，我可以在那里看到这个问题。

我检查了代码，看起来 position: absolute; in .disp class 导致了这个问题。

我查看了文档，但没有获得有关此行为的任何信息。

如果您将 position 设置为 relative 或 static 则问题可以解决。您可以将其用作此问题的解决方法。

代码：

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>

输出：

编辑：

如果设置显示：inline-table;。这将有助于解决问题，并且两个元素将显示在同一行中。

输出：

元素在 MS Edge 中悬停时失去粘性位置

Element loses sticky position on hover in MS Edge

html

css

sticky

hover

microsoft-edge