Img“轻弹”列数

Posted 2023-05-08

【中文标题】Img“轻弹”列数

【英文标题】：Img "flicking" with column-count

【发布时间】：2019-03-15 22:18:06

【问题描述】：

我在使用 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;

<p>-标签由 Wordpress 自动创建。

【问题讨论】：

<p> WordPress 插入没有任何区别。我创建了一个 Fiddle 来演示没有任何 CMS 的问题。 jsfiddle.net/twigmac/xpvt214o/890303你有解决办法吗？

【参考方案1】：

您是否尝试过手动激活图像的悬停状态？

此处的说明："Inspect" a hover element?

我不太了解你的代码，无法从中获得任何超级有用的东西，但你可能会从中得到我缺乏知识的线索。您绝对可以看到第一列中的图像与第二列和第三列中的图像之间的不同行为。

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