Safari：具有绝对位置的 CSS 多列悬停错误？答案

【问题标题】：Safari: CSS Multi-column hover bug with absolute position?Safari：具有绝对位置的 CSS 多列悬停错误？
【发布时间】：2018-03-12 23:39:57
【问题描述】：

我有以下简单的 CSS 多列布局：

ul {
  column-count: 3;
}

li {
  display: block;
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top .25s ease-in-out;
}

li:hover .hover {
  top: 0;
}

img {
  max-width: 100%;
}

<ul>
  <li><img src="https://picsum.photos/400/50" alt=""></li>
  <li><img src="https://picsum.photos/400/100" alt=""></li>
  <li>
    <img src="https://picsum.photos/400/300" alt="">
    <div class="hover">Lorem ipsum dolor sit amet.</div>
  </li>
</ul>

如果您将鼠标悬停在第三个项目上，则悬停div 应该与第三个列表元素具有相同的大小并且完全位于相同的位置。这在 Chrome 和 Firefox 中运行良好。

但是，在 Safari 中，悬停 div 也将位于前两张图片之后的第一列中。

比较：

铬：

Safari：

我有什么遗漏或者这只是 Safari 中的一个错误吗？

我正在运行两种浏览器的最新版本（Chrome 65.0.3325.146 和 Safari 11.0.3）。

【问题讨论】：

有趣，如果你尝试 0% 而不是 0 会怎样？ [应该是一样的，但我们永远不知道]
这是不考虑网格轨迹的绝对位置示例吗？
不...尽管标题如此，但这里根本没有涉及网格。
我更正了帖子标题以避免出现混淆。

标签： html css safari css-multicolumn-layout

【解决方案1】：

您可以在下面尝试，通常这是防止列项目中断的技巧。

li {
  display: inline-block;
}

ul {
  column-count: 3;
}

li {
  display: inline-block;
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top .25s ease-in-out;
}

li:hover .hover {
  top: 0;
}

img {
  max-width: 100%;
}

<ul>
  <li><img src="https://dummyimage.com/400x50" alt=""></li>
  <li><img src="https://dummyimage.com/400x100" alt=""></li>
  <li>
    <img src="https://dummyimage.com/400x300" alt="">
    <div class="hover">Lorem ipsum dolor sit amet.</div>
  </li>
</ul>

【讨论】：