为什么内联网格在Safari中不起作用？ [英] Why doesn't inline-grid work in Safari?

问题描述

我正在处理WordPress重力表单，并使用内联网格进行布局。

它在Firefox和Chrome浏览器中完美运行。

但是对于Safari来说， display：inline-grid 不起作用。
尽管显示：内联块可行。

---

在Safari中运行以下代码片段以查看我在说什么。

  .item {宽度：50px;高度：50px；背景色：浅灰色；显示：inline-block; margin：5px;}。item2 {width：50px;高度：50px；背景颜色：灰色；显示：内联网格；保证金：5px;}  

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

解决方案

Safari支持CSS网格布局

  desktop-版本10.1 
 ios-版本10.3 
  

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

可能您使用的不是一个非常新鲜的Safari。 / p>

BTW，在我的台式机10.1.1版上，您的代码可以按预期工作。

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>

解决方案

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.

这篇关于为什么内联网格在Safari中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！