这种跨浏览器的Grid布局兼容性坑我之前踩过好几次，给你几个针对性的解决方案，应该能搞定：

• 显式给Grid容器设置最小高度
  很多时候Safari和Firefox会因为Grid容器没有明确的高度参考而塌陷，直接给容器加上：

  .post-grid-slider {
    min-height: min-content; /* 让容器高度适配内容 */
    /* 如果是固定高度场景，也可以用 min-height: 100vh; 这类值 */
  }
  

  这个方法能强制浏览器识别子元素的高度，避免出现0/1px的异常情况。

• 用Grid原生属性替代Flex包裹
  既然核心是Grid布局，没必要套Flex层来兼容。试试给Grid容器加上：

  .post-grid-slider {
    grid-auto-rows: min-content; /* 自动适配每一行的内容高度 */
    height: auto; /* 确保容器高度由内容决定 */
  }
  

  这个属性能让Grid自动计算行高，解决不同浏览器高度计算逻辑不一致的问题。

• 针对Safari的专属兼容规则
  如果上面的方法还不行，可以用@supports写个Safari专属的降级方案，让Safari用Flex，其他浏览器保留原生Grid：

  /* 基础Grid布局（Chrome/Edge/Firefox优先识别） */
  .post-grid-slider {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* 根据你的需求调整间距 */
  }
  
  /* Safari专属规则（利用-webkit前缀特性判断） */
  @supports (-webkit-touch-callout: none) {
    .post-grid-slider {
      display: flex;
      flex-flow: row wrap;
      /* 保持和Grid一致的列数，用flex-basis控制宽度 */
      > .post-box {
        flex-basis: calc(25% - 0.75rem); /* 对应4列，减去gap的影响 */
      }
    }
  }
  

  这样Safari会优先应用Flex规则，而Firefox和Chrome还是用原生Grid，两边的高度问题都能兼顾。

• 检查子元素的文档流状态
  最后确认一下你的帖子盒子（.post-box）有没有用float、position: absolute这类脱离文档流的属性，这些会导致Grid容器无法正确计算高度，改成position: relative或者默认定位就能解决。

内容的提问来源于stack exchange，提问作者ShakedHead