Safari 的 CSS 网格（网格模板列）修复？

Question

最近我又重新学习了网页设计，为我们正在组织的免费节日创建了一个网站。现在我对 CSS Grid 非常感兴趣，一切似乎都在进行中，直到有人告诉我该网站在 Safari 中看起来很愚蠢..

网格系统的下半部分按应有的方式显示......在移动设备上。但是标题下方的赞助商徽标似乎只是一个垂直列表。

现在我可以用浮动以不同的方式修复这些徽标，对于下部我不知道如何使它看起来相同，但我宁愿为 Safari 找到一种解决方法。

我希望它与网格模板列有关，尝试了一些东西（从 auto 更改为 fr 并添加 align/justify-self），但我自己似乎无法弄清楚。这里有人可以帮帮我吗？

HTML：

<div class="sponsors">
<div class="sponsorlogo">
    <a href="https://www.recupel.be/nl/" target="_blank"><img src="img/Logo_Recupel.png" alt="Logo Recupel" /></a>
</div>
<div class="sponsorlogo">
    <a href="https://www.brugge.be/" target="_blank"><img src="img/Logo_StadBrugge.png" alt="Logo Stad Brugge" /></a>
</div>
<div class="sponsorlogo">
    <a href="https://www.transform3.be/" target="_blank"><img src="img/Logo_transform3.png" alt="Logo transform3" /></a>
</div>
<div class="sponsorlogo">
    <img src="img/Logo_ecoFoundation.png" alt="Logo eco Foundation" />
</div>
<div class="sponsorlogo">
    <a href="https://www.aandeplas.be/" target="_blank"><img src="img/Logo_AandePlas.png" alt="Logo Domein Aan de Plas" /></a>
</div>
<div class="sponsorlogo">
    <a href="https://www.legendstours.be/" target="_blank"><img src="img/Logo_LegendsFreeWalkingTours.png" alt="Logo Legends Free Walking Tours" /></a>
</div>
<div class="sponsorlogo">
    <a href="https://pathstopachamama.com/" target="_blank"><img src="img/Logo_MoederAarde.png" alt="Logo Moeder Aarde" /></a>
</div>

CSS：

.sponsors{
display: grid;
grid-template-columns: repeat(7, auto);
}

.sponsorlogo img{
object-fit: scale-down;
height: 100%;
max-width: 100%;

}

直播http://pachafest.be

提前致谢！

Answer 1

Safari 尚不支持使用网格属性（例如 grid-template-rows）进行内部和外部大小调整。你可以使用@supports

@supports (display: grid) {
.sponsors {
     display: grid;
     grid-template-columns: repeat(7, auto);
  }
}

@supports not (display: grid) {
   // Safari/IE style
}