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

问题描述 投票:1回答:1

第二个表头在悬停时显示了另一个元素。问题是,当鼠标悬停时,它将失去在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>
html css hover microsoft-edge sticky
1个回答
0
投票

我使用MS Edge旧版浏览器44.18362.449.0测试了该问题,在那可以看到该问题。

enter image description here

我检查了代码,看起来像。disp类中的position:absolute;导致了此问题。

我检查了文档,但未获得有关此行为的任何信息。

如果将位置设置为相对静态,则可以解决该问题。您可以将其用作解决此问题的方法。

代码:

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

© www.soinside.com 2019 - 2024. All rights reserved.