CSS列样式只适用于Chrome中的一列

我正在使用响应式照片网格研究WordPress主题。基本上它是一个div容器，它在3列中显示其子div元素。我在每个较小的div上添加了一些css悬停效果。CSS列样式只适用于Chrome中的一列

照片网格在Firefox上正常显示，但在Chrome浏览器中，只有第一列div显示为他们应该显示的内容。其他两列的图像不显示，但是当它们悬停时闪烁。

下面是代码片段或you can open it in 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 -->

来源

2017-10-06 S T

对于我们来说，它可能会更清晰些，如果你用一些示例数据替换你的PHP，并将你的代码放到一个代码片段中 – SourceOverflow

@SourceOverflow编辑！谢谢，并对此表示歉意。 –

有人提到here说他们设法通过将transform: translateZ(0)添加到网格项来解决这个问题，以启用hardw是加速度，在这种情况下：

.grid-cell-container { 
    transform: translateZ(0) 
}

来源

2017-10-06 02:34:39

这工作！谢谢@安德鲁克劳福德 –

我发现了一个解决方案通过在.grid-outer改变列属性display: flex;并添加%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所有图像将工作和悬停不会有任何问题

来源

2017-10-06 02:10:14 pharesdiego

哇这个工作！非常感谢你@pharesdiego，你拯救了这一天！ –

将transform: translateZ(0)添加到网格容器固定它。显然它是enables hardware acceleration。

.grid-cell-container { 
    transform: translateZ(0) 
}

删除filter: grayscale(100%);在图像上也解决了问题。

感谢您的帮助！我希望Chrome解决这个错误。

来源

2017-10-07 19:05:54

CSS列样式只适用于Chrome中的一列

回答

相关问题