html - 带列的列表对 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 parent 。

我的问题是:有没有什么方法可以防止这种情况发生，而不(显着)改变元素的外观？

编辑:根据要求，这是某人发送的演示，说明了片段中的效果:

编辑 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) 并且工作正常。