CSS Grid (grid-template-column)修复Safari？
CSS Grid (grid-template-column)修复Safari？
提问于 2018-07-30 02:19:18
最近，我又开始学习网页设计，为我们正在组织的一个免费节日创建了一个网站。现在我对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%;}
提前感谢！
回答 1
Stack Overflow用户
发布于 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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51583233
复制相关文章
相似问题