gpt4 book ai didi

html - Safari 的 CSS 网格(网格模板列)修复?

转载 作者:太空宇宙 更新时间:2023-11-03 22:25:11 27 4
gpt4 key购买 nike

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

网格系统的下半部分显示在移动设备上。但是标题下方的赞助商 Logo 看起来只是一个垂直列表。

现在我可以使用 float 以不同的方式修复这些 Logo ,对于下半部分我不知道如何让它看起来一样,但我宁愿为 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

提前致谢!

最佳答案

Safari 尚不支持使用网格属性(例如网格模板行)进行内部和外部大小调整(来源:Can I Use)。你可以使用@supports

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

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

关于html - Safari 的 CSS 网格(网格模板列)修复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51583233/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com