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

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

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