html - 显示:inline-grid doesn't support on very fresh safari
<p><p>在我的网站中，我设计了一个 <code>ul</code>，它在我的页面中显示社交图标。</p>
<p>结构</p>
<pre><code><ul>
<li>icon1</li>
<li>icon2</li>
<li>icon3</li>
<li>icon4</li>
</ul>
</code></pre>
<p>css</p>
<pre><code>ul{
list-style-type: none;
}
ul>li{
display: inline-grid;
}
</code></pre>
<p>除了<strong>非新鲜的 safari 浏览器</strong>之外，上述 css 适用于所有 css。我在检查 <strong>OPPO</strong> 手机时发现了这个问题。他们正在使用非新鲜的 Safari 。</p>
<p> <a href="/image/hYcuU.png" rel="noreferrer noopener nofollow">Screenshot from IOS safari browser</a> </p>
<p> <a href="/image/x2h78.jpg" rel="noreferrer noopener nofollow">Screenshot from OPPO browser</a> </p>
<p>这里的 stackoverflow 中有一个相同类型的问题 (<a href="https://stackoverflow.com/questions/44659311/why-doesnt-inline-grid-work-in-safari" rel="noreferrer noopener nofollow">Why doesn't inline-grid work in Safari?</a>)。但是我找不到针对此问题的适当替代答案。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>因为 safari 不支持 <code>inline-grid;</code></p> 不工作
<p>支持仅来自:<a href="https://caniuse.com/#feat=css-grid" rel="noreferrer noopener nofollow">https://caniuse.com/#feat=css-grid</a> </p>
<pre><code>safai: version 11.1 +
safari ios: from version 10.3 +
</code></pre>
<p>您可以使用 <code>display: inline-block;</code> 代替 <code>inline-grid;</code></p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul{
list-style-type: none;
}
ul>li{
display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><ul>
<li>icon1</li>
<li>icon2</li>
<li>icon3</li>
<li>icon4</li>
</ul></code></pre>
<p style="font-size: 20px;">关于html - 显示:inline-grid doesn't support on very fresh safari，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/51415637/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/51415637/
</a>
</p>
页:
[1]