为什么Safari浏览器不支持inline-grid布局？

Question

我正在处理一个WordPress重力表单，并使用inline-grid进行布局。
在Firefox和Chrome中，它能够完美地工作。

但是在Safari中，display:inline-grid不起作用。
虽然display:inline-block可以正常工作。

---

在Safari中运行以下代码段，以了解我所说的情况。

.item {
  width: 50px;
  height: 50px;
  background-color: lightgray;
  display: inline-block;
  margin: 5px;
}

.item2 {
  width: 50px;
  height: 50px;
  background-color: gray;
  display: inline-grid;
  margin: 5px;
}

<div class="item"></div>
<div class="item"></div>
<hr>
<div class="item2"></div>
<div class="item2"></div>

- Ricky Dam

---

我确认在Safari中，下方的块是一个在另一个上方，而在Chrome中它们是并排的。 - Vanquished Wombat

Answer 1

Safari支持CSS Grid布局

desktop -- from version 10.1
ios -- from version 10.3

http://caniuse.com/#feat=css-grid

可能您使用的是不太新的 Safari 浏览器。

顺便提一下，在我的桌面电脑上，版本号为 10.1.1，您的代码按照预期运行。

- Kosh

---

就是这样。我在另一台安装了Sierra的Mac上再次尝试，结果很顺利。我的系统是El Capitan。你所说的“不太新鲜”是指当前最新版本之前的那个版本吗？哈哈。无论如何，感谢Kosh！ - Ricky Dam