Img使用column-count进行“轻弹”

Question

我在我的网站上的Google Chrome和Safari上的图库中有一个显示错误。使用column-count，我创建了3列。但是第2列和第3列中显示的第一个图像显示不正确。当我将鼠标悬停在图像上时，会出现一种“闪烁”的感觉。在Mozilla Firefox或MS Edge中，我经常没有此错误。

Demo

HTML：

<div id="gallery_box">
<p>
<img src=".../img01.jpg" />
<img src=".../img02.jpg" />
[...]
<img src=".../img30.jpg" />
</p>
</div>

CSS：

gallery_box {
column-count: 3;
column-gap: 0;
text-align: center;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 0;
-webkit-column-gap: 0;
}

gallery_box p {
margin: 0;
padding: 0;
}

gallery_box img {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
display: block;
max-width: 97%;
margin: 0 0 4% 0;
opacity: 0.9;
transition: 0.5s ease;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

gallery_box img:hover {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
opacity: 1.0;
transition: 0.5s ease;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

Wordpress自动创建的<p>-tag。

Answer 1

你有没有试过手动激活一个按你想要的方式工作的图像的悬停状态，而不是像你想的那样工作的图像？

这里有说明："Inspect" a hover element?

我对你的代码不够了解，无法从中得到任何非常有用的东西，但你可能会从中得到一些线索，而我缺乏相关的知识。你可以清楚地看到第一列中的图像与第二和第三列中的图像之间的不同行为。

此方法可能会对您有所帮助，因为您只能看到一个悬停过渡。在我看来，当我用鼠标光标悬停时，会有几个过渡，这让我很难看到发生了什么。