css - 相同的 CSS，不同的结果(Bootstrap4，仅限 Chrome)

Question

我的网站上有图片，悬停时会在中间显示说明文字。相同的 HTML，每个都应用了相同的 CSS。它在大多数浏览器中工作正常，除了 Chrome，其中只有第一列图像正常工作，其余部分损坏。

Link to my website

Firefox 和 Edge 都可以，IE 也可以

Answer 1

您需要将 img-caption 上的转换属性更改为 translate3d(-50%, 100%, 0)。

编辑:

关于容器上的悬停问题，这是由于您的 column-count 属性造成的。将您的 .gal3 类改为使用 flex 属性可以解决此问题。

.gal3 {
  display: flex;
  flex-flow: row wrap;
}

.gal3 .gal-container {
  width: 33%;
}

如果您也想将图像居中，您可以使用您已经在使用的相同 align-middle 类。