jquery - 位置绝对 TD 在可见后留下空白空间

Question

所以，我有一个表，每个 TR 中的最后一个 TD 元素都有类“abs”。此类具有代码中给定的样式。

它在默认情况下是隐藏的，在悬停在 TR 上时，我通过在 jQuery 中为其提供“display:block”样式来显示它。

$("tr").hover(function() {
  $(this).find(".abs").show();
},
function() {
  $(this).find(".abs").hide();
});

.abs {
  display: none;
  position: absolute;
  margin-left: 100px;
  background: #fff;
  margin-top: -40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<br /><br /><br /><br />
<table>
  <tr>
    <td>123</td>
    <td class="abs">456</td>
  </tr>
</table>

我遇到的问题是，当显示 TD.abs(悬停时)时，它显示正常，但 TR 末尾出现一个空白区域，这是我不想要的。这只发生在 Chrome 中，而在 Firefox 上它工作正常(未显示空白区域)。

如何为 Chrome 修复它？

Answer 1

删除 position: absolute; 并且您的代码将起作用。

$("tr").hover(function() {
    $(this).find(".abs").show();
  },
  function() {
    $(this).find(".abs").hide();
  });

.abs {
  display: none;
  background: #fff;
  margin-top: -40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>123</td>
    <td class='abs'>456</td>
  </tr>
</table>