Why doesn't inline-grid work in Safari?

2019-06-28 02:15发布

问题:

I am working on a WordPress gravity form and used inline-grid for the layout.
It works perfectly in Firefox and Chrome.

But when it comes to Safari, display: inline-grid does not work.
Although display: inline-block works.


Run the following code snippet in Safari to see what I am talking about.

.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>

回答1:

Safari supports CSS Grid Layout

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

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

Probably you're using not a very fresh Safari.

BTW, on my desktop v. 10.1.1 your code works as expected.