Question

在我的网站中，我设计了一个ul，可在页面上显示社交图标。

结构

<ul>
  <li>icon1</li>
  <li>icon2</li>
  <li>icon3</li>
  <li>icon4</li>
</ul>

css

ul{
   list-style-type: none;
}
ul>li{
  display: inline-grid;
}

上述CSS在除非新鲜的野生动物园浏览器以外的所有CSS中均有效。我在检查 OPPO 手机时发现了此问题。他们正在使用非新鲜的野生动物园。

Screenshot from IOS safari browser

Screenshot from OPPO browser

这里（Why doesn't inline-grid work in Safari?）中的stackoverflow中存在相同类型的问题。但是在那里我找不到合适的替代答案。

Answer 1

该功能不起作用，因为该野生动物园不支持inline-grid;

支持仅来自：https://caniuse.com/#feat=css-grid

safai: version 11.1 + 
safari ios: from version 10.3 +

您可以使用display: inline-block;代替inline-grid;

ul{
   list-style-type: none; 
}
ul>li{
     display: inline-block;
}

<ul>
  <li>icon1</li>
  <li>icon2</li>
  <li>icon3</li>
  <li>icon4</li>
</ul>

注意！ 这是使用flex的另一种方式，但据我所知，它不支持旧的safari

Answer 2

您可以使用flexbox代替网格。对旧版Safari（带有前缀的版本7）的支持为：https://caniuse.com/#search=flex

RE="`echo "$*" | sed 's: :\\|:g'`"
git show --pretty=format: --name-only "$@"
    | sed '/^$/d'
    | sort
    | uniq
    | xargs -l git blame --
    | grep "$RE"

ul{
   display: flex;
   list-style-type: none;
}

display：inline-grid不支持非常新鲜的野生动物园

2 个答案: