带列的列表对Webkit / IE中的错误项目提供了悬停效果

Question

今天，我遇到了以下问题：如摘要所示，当使用包含多列的列表时，列表项设置为margin-bottom，Chrome无法正确显示列的底部，将鼠标悬停在最底端的下方时，会将鼠标悬停事件发送到错误的<li>。

要查看此效果，只需在最左列的底部项目的底部上来回徘徊。它简要突出显示单个像素的第4个元素，然后突出显示第3个像素。

ul {
  columns: 3;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  background: #6F6;
  margin-bottom: .4em;
  cursor: pointer;
}

li:hover {
  background: #CFC;
}

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
  <li>Consectetur</li>
  <li>Adipiscing</li>
  <li>Elit</li>
</ul>

这似乎只发生在Chrome（稳定的69.0.3497.100）和Safari（以及Internet Explorer 10和11）中，而不是在FF / Edge中发生。即使我向margin-bottom: -1px; overflow: hidden;父级添加了ul之类的东西，它似乎也持续存在。

我的问题是：有什么方法可以防止这种情况的发生，而不必（显着）改变商品的外观？

编辑：根据要求，以下是一个有人发送的演示，说明了代码段中的效果：

编辑2：将gif更改为摘要，并添加了有关浏览器版本（Chrome 69.0.3497.100）和IE10 / IE11的信息。关于IE的有趣之处在于，这种效果不再是单个不可见的像素行，而是一个受影响的可见像素条。参见下图。

Answer 1

您必须更改内置的li：

  

margin-bottom：0.4em

收件人：

  

margin-bottom：0.39em

仅在以下情况下出现问题：列为3，边距为0.4em（6.400px），因此在此版本的Chrome中会产生一些圆形问题； /

测试后：0.39em是（6.240px），可以正常工作。