小编Sha*_*ead的帖子

我正在构建一种后网格滑块，它将在CSS网格中显示4个框。我构建了所有内容，并且它按预期工作，但在Firefox中不起作用。

Firefox和Safari都无法显示网格高度。它们导致0或1px。为了解决这个问题，我使用display：flex和flex-flow设置为换行。这在Safari中有效，但在Firefox中无效。当我从容器中删除flex时，它可以在Firefox中运行，但随后不能在Safari中运行。

Edge和Chrome都可以。我迷失在寻找解决方案并尝试解决它的问题，但结果仍然相同。

我正在使用padding-top和position absolute来具有“按比例”响应的网格及其项目。

谢谢您的回复。 https://codepen.io/Mariopa/pen/ELjqYr

的HTML

<div class="post-grid-slider">
  <div class="post-grid-wrapper">
    <div class="post-grid">
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
         <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/Inoutic-1024x683)"></div>          
          <div class="subcategory"><span >Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
          <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/kinds-of-food-3320746_1920-1024x683)"></div>         
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
          <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/leaf-397870_1920-1024x768)"></div>  
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
         <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
           <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/grape-hyacinth-1024x679)"></div>          
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
    </div> …