html - Safari:具有绝对位置的 CSS 多列悬停错误？

Question

我有以下简单的 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 也会出现在前两张图片之后的第一列中。

比较:

Chrome:

Safari :

我是否遗漏了什么，或者这只是 Safari 中的一个错误？

我运行的是两种浏览器的最新版本(Chrome 65.0.3325.146 和 Safari 11.0.3)。

Answer 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>