最近,我又开始学习网页设计,为我们正在组织的一个免费节日创建了一个网站。现在我对CSS Grid非常兴奋,一切似乎都很顺利,直到有人告诉我这个网站在Safari中看起来很愚蠢。
网格系统的下半部分显示为预期的状态。在手机上。但是赞助商的徽标在标题下面看起来像是一个垂直列表。
现在我可以用float以一种不同的方式修复这些徽标,对于较低的部分,我不知道如何让它看起来相同,但我更愿意为Safari找到一个变通方法。
我想它与grid-template-column有关,我尝试了一些东西(从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%;
}
提前感谢!
发布于 2018-07-30 04:15:16
Safari还不支持使用网格属性(如grid-template-rows )调整内部和外部大小。您可以使用@supports
@supports (display: grid) {
.sponsors {
display: grid;
grid-template-columns: repeat(7, auto);
}
}
@supports not (display: grid) {
// Safari/IE style
}
https://stackoverflow.com/questions/51583233
复制相似问题