我正在制作带有响应式照片网格的WordPress主题。本质上，它是一个div 容器，在 3 列中显示其子div 元素。我在每个较小的div上添加了一些css悬停效果。
照片网格在 Firefox 上显示正常，但在 Chrome 中，只有第一列div 按预期显示。其他两列的图像不显示，但悬停在上方时会闪烁。
下面是代码片段，或者您可以在 Codepen 中打开它（您必须打开 Chrome 浏览器和另一个浏览器才能看到问题）。
/* Grid styling */
.grid-outer::before,
.grid-outer::after{
content:"";
background-color: transparent!important;
}
.grid-outer {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
/* Firefox */
column-count: 3;
-webkit-column-gap: 0px;
column-gap: 0px;
background-color: transparent!important;
opacity: 1;
overflow: hidden;
position: relative;
z-index: 500;
}
.grid-outer li {
width: 100%;
padding: 0px;
}
.grid-cell-container a{
font-family: 'Oswald', sans-serif;
line-height: 1;
overflow: hidden;
width: 100%;
display: block;
}
.img-container {
overflow: hidden;
position: relative;
background-color:black;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding: 0px;
margin: 0px;
}
.img-container:hover {
overflow: hidden;
}
.post-title-link img {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-filter: grayscale(100%);
/* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(100%);
/* FF 35+ */
width: 100%;
opacity:0.7;
}
.post-title-link:hover img {
webkit-filter: grayscale(0%);
/* Ch 23+, Saf 6.0+, BB 10.0+ */
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
/* FF 35+ */
opacity:1;
}
.post-title-link .grid-title {
opacity:0;
display: block;
text-shadow: 2px 2px 15px black;
color: white;
padding: 10px 10px 10px 30px;
font-size: 150%;
text-align: right;
width: 70%;
position: absolute;
bottom: 10px;
opacity:1;
right:0px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}<div class="grid-outer">
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<div class="grid-cell-container">
<!-- Image -->
<div class="img-container">
<a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
<div class="grid-title">Togepi</div>
</a>
</div>
</div>
<!-- end of the loop -->
</div>
<!-- .grid-outer -->有人在这里提到，他们设法通过向网格项添加transform: translateZ(0)来启用硬件加速来解决此问题，在这种情况下：
.grid-cell-container {
transform: translateZ(0)
}
我通过将列属性更改为display: flex; .grid-outer并将%33.333宽度添加到.grid-cell-container中找到了一个解决方案
.grid-outer {
display: flex;
display: -ms-flex;
display: -webkit-flex;
flex-wrap: wrap;
opacity: 1;
overflow: hidden;
position: relative;
z-index: 500;
}
.grid-cell-container{
width: 33.333%;
}
您甚至可以通过添加这样的媒体查询来使图像"响应式"：
@media all and (max-width: 480px){
.grid-cell-container{
width: 100%;
}
}
如果你想让它真正 100% 响应，我建议你使用 flex 属性，如 flex-direction, justify-content, align-items, 等
如果你想知道为什么你的代码不起作用，那么...我正在阅读，我发现了一些关于 Chrome 和 filter:grayscale() 的错误报告，我想使用 filter + column-count 是 Chrome 的错误，因为如果您只删除代码中的column-count和-webkit-column-count，所有图像都将正常工作，悬停不会有任何问题
将
transform: translateZ(0)添加到网格容器可以修复它。显然，它支持硬件加速。
.grid-cell-container {
transform: translateZ(0)
}
删除图像上的filter: grayscale(100%);也解决了这个问题。
感谢您的帮助！我希望Chrome可以解决此错误。
尝试执行以下所有/任意操作：
- 外块的
display: flex - 多列模块的
width: 100%