html CSS网格(网格模板列)修复Safari浏览器？

vulvrdjw 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(106)

最近我又开始做网页设计了，为我们正在组织的一个免费节日创建了一个网站。现在我对CSS网格很感兴趣，一切似乎都很顺利，直到有人告诉我这个网站在Safari中看起来很愚蠢。
下半部分的网格系统显示，因为它应该是..在移动。但赞助商的标志下方的标题只是似乎是一个垂直列表。
现在我可以用不同的方式修复这些标志，可能是浮动的，对于下半部分，我不知道如何使它看起来一样，但我宁愿只是找到一个Safari的变通方案。
我想它可能和grid-template-columns有关，尝试了一些东西（从auto改为fr，添加align/justify-self），但是我自己好像弄不明白。这里有人能帮我吗？
超文本：

<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上直播
先谢了!

Html

来源：https://stackoverflow.com/questions/51583233/css-grid-grid-template-columns-fix-for-safari

1条答案

按热度按时间

ercv8c1e1#

Safari尚不支持网格属性（如grid-template-rows）的内在和外在大小调整（来源：Can I Use）。您可以使用@supports

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

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

赞(0）回复(0）举报 2023-02-10

我来回答

html CSS网格(网格模板列)修复Safari浏览器？

1条答案

相关问题

热门标签

最新问答