CSS网格在Safari中不起作用
CSS网格在Safari中不起作用
提问于 2018-07-05 03:12:40
我想知道是我做错了什么，还是在Safari (MacOS或iOS)中不支持CSS grid，尽管他们说所有地方都支持它？
我尝试了这样的东西：
ul {
list-style-type: none;
text-align: center;
}
.grid {
display: grid;
grid-gap: 20px;
}
.grid-4 {
grid-template-columns: repeat(4, auto);
} <ul class="grid grid-4">
<li class="grid-item">
<img src="http://via.placeholder.com/350x150"/>
<a href="/">Browse Online, Buy in Store</a>
</li>
<li class="grid-item">
<img src="http://via.placeholder.com/350x150"/>
<a href="/">Browse Online, Buy in Store</a>
</li>
<li class="grid-item">
<img src="http://via.placeholder.com/350x150"/>
<a href="/">Browse Online, Buy in Store</a>
</li>
<li class="grid-item">
<img src="http://via.placeholder.com/350x150"/>
<a href="/">Browse Online, Buy in Store</a>
</li>
</ul>
它在Chrome、FF甚至最新的Edge上都能正常工作，但在Safari 10.0.1上就不行了
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-05 03:15:09
只有桌面上的Safari11.1和iOS上的Safari10.3才支持CSS Grid。
Stack Overflow用户
发布于 2021-11-30 00:37:33
我引用了同一篇关于将display:grid添加到父元素的previous comment文章，但它对我来说并不一致-它不起作用，然后我取消选中父display:grid，它起作用了，如果我再次检查它，它仍然可以正常工作。
我发现了一个：：后伪元素-在网格中-它占用了所有可用的空间，并将我的列(在我的例子中)挤在一起，所以它们都聚集在左边，一个图像被挤压得超薄。我将这个伪元素样式添加到原始的网格元素中：
.cocktails .grid::after {
display: none;
}...and它成功了！
之所以是flakey，是因为在视图元素开发窗口中使用了这个伪元素之后，它就消失了。
Stack Overflow用户
发布于 2021-11-08 17:34:29
我遇到了类似的问题，我在父元素上设置了display: grid，它帮助我实现了https://stackoverflow.com/a/63197330/14101530
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51179718
复制相关文章
相似问题