带列的列表对 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。即使我向 ul 父级添加 margin-bottom: -1px; overflow: hidden; 之类的内容，它似乎也会持续存在。

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

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

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

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

List with columns gives hover effect on wrong items in Webkit/IE

html

css

webkit

google-chrome

css-multicolumn-layout