CSS 网格在 Safari 中不起作用

Question

我试图弄清楚我做错了什么，或者 Safari（MacOS 或 iOS）不支持 CSS 网格，即使他们说它在任何地方都支持？

我尝试过这样的事情：

  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 上却不行

Answer 1

我引用了与previous comment 相同的文章，关于将 display:grid 添加到父元素，但它对我来说不一致 - 它不起作用，然后我取消选中父 display:grid 并且它起作用了，如果我再次检查了它，它仍然可以正常工作。

我发现 ::after 伪元素 - 在网格内 - 它占用了所有可用空间并将我的列（在我的情况下）挤压在一起，所以它们都聚集在左侧，并且图像被超级挤压薄的。我将这个伪元素样式添加到原始网格元素中：

.cocktails .grid::after {
    display: none;
}

...它成功了！

它是 flakey 的原因是伪元素在您在视图元素开发窗口中使用后消失了。

Answer 2

我有类似的问题，我将display: grid 放在父元素上，它帮助了我 https://stackoverflow.com/a/63197330/14101530

Answer 3

仅从桌面版 Safari 11.1 和 iOS 版 Safari 10.3 开始支持 CSS Grid。

参考：https://caniuse.com/#search=grid