Question

最近，我再次进行了网页设计，为我们正在组织的免费音乐节创建了一个网站。现在，我对CSS Grid的使用已经相当退出了，直到有人告诉我该网站在Safari中看起来很愚蠢为止，一切似乎都在解决。

显示网格系统的下部，就像在移动设备上那样。但是标题下方的赞助商徽标只是一个垂直列表。

现在我可以用float来以其他方式修复这些徽标，对于下半部分，我不知道如何使其看起来相同，但我只想找到一种针对Safari的解决方法。

我希望它与grid-template-columns有关，尝试了一些东西（从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
}

Safari的CSS网格（grid-template-columns）修复程序了吗？

1 个答案: