论坛 › 知识问答 › html - CSS3 Grid-gap 在 iphone 上不起作用

菜鸟教程小白 发表于 2022-12-11 19:06:07

html - CSS3 Grid-gap 在 iphone 上不起作用

                                            <p><p>我正在使用 CSS 制作模板，一切正常，但网格间隙在 iPhone 上不起作用。这是我目前所拥有的:</p>

<pre><code>&lt;div class=&#34;grid&#34;&gt;

      &lt;h1 class=&#34;page-title&#34;&gt;
            &lt;?php echo $username; ?&gt;
      &lt;/h1&gt;

      &lt;header class=&#34;header&#34;&gt;
            Reviewed
            &lt;?php
                $sql = $mysqli-&gt;query(&#34;SELECT `id` FROM `users` WHERE `username`=&#39;$username&#39;&#34;);
                $result = $sql-&gt;fetch_assoc();
                $result = $result[&#39;id&#39;];

                $sql = $mysqli-&gt;query(&#34;SELECT COUNT(rating) FROM `reviews` WHERE `userid`=&#39;$result&#39;&#34;);
                $result = $sql-&gt;fetch_assoc();

                echo &#34; &#34; . $result[&#39;COUNT(rating)&#39;] . &#34; &#34;;
                if ($result[&#39;COUNT(rating)&#39;] == 1) {
                  echo &#34;Movie&#34;;
                } else {
                  echo &#34;Movies&#34;;
                }

            ?&gt;
      &lt;/header&gt;

            &lt;main class=&#34;main-content&#34;&gt;
                Test
            &lt;/main&gt;

            &lt;aside class=&#34;sidebar&#34;&gt;
                Sidebar
            &lt;/aside&gt;

      &lt;footer class=&#34;footer&#34;&gt;
            Footer
      &lt;/footer&gt;
    &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.grid {
margin: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
&#34;index-title index-title&#34;
&#34;index-header index-header&#34;
&#34;index-main-content index-main-content&#34;
&#34;index-sidebar index-sidebar&#34;
&#34;index-footer index-footer&#34;;
grid-gap: 10px;
}

.page-title {
grid-area: index-title;
text-align: center;
}

.header {
grid-area: index-header;
border: 1px black solid;
font-size: 20px;
text-align: center;
}

.main-content {
grid-area: index-main-content;
background-color: green;
}

.sidebar {
grid-area: index-sidebar;
background-color: yellow;
}

.footer {
grid-area: index-footer;
background-color: purple;
}

@media screen and (min-width: 1062px) {

.grid {
    margin: 15px;
    display: grid;
    grid-template-columns: 1fr 500px 500px 1fr;
    grid-template-rows: 1fr 1fr 2fr 1fr;
    grid-template-areas:
    &#34;. index-title index-title .&#34;
    &#34;. index-header index-header .&#34;
    &#34;. index-main-content index-sidebar .&#34;
    &#34; .index-footer index-footer .&#34;;
    grid-gap: 10px;
}
}
</code></pre>

<p>当我最小化页面时，gap 起作用了，但是当我在 iPhone SE 上检查时，grid-gap 不起作用？为什么会这样？</p>

<p>希望你能理解我的问题</p>

<p>提前致谢。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>查看此页面 (<a href="https://caniuse.com/#search=grid" rel="noreferrer noopener nofollow">https://caniuse.com/#search=grid</a>)，进入“已知问题”并查看它对 safari 的描述:</p>

<blockquote>
<p>Safari does not yet support intrinsic and extrinsic sizing with grid
properties such as grid-template-rows</p>
</blockquote></p>
                                   
                                                <p style="font-size: 20px;">关于html - CSS3 Grid-gap 在 iphone 上不起作用，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/46945906/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/46945906/
                                                        </a>
                                                </p>
                                       

查看完整版本: html - CSS3 Grid-gap 在 iphone 上不起作用