在 Safari（iPhone）中帶間隙的顯示彎曲不起作用
[英]Display flex with gap not working in Safari (IPhone)
問題描述
我需要在一列中呈現產品列表。 我用 display: flex 和gap 。 在所有瀏覽器中，它都可以正常工作，但在 Safari 中， gap不起作用。 產品之間沒有空格（間隙）。
我怎么解決這個問題？
.wrapper { padding-top: 1.3125rem; padding-bottom: 2.5rem; display: flex; flex-flow: column; gap: 1rem; }.product { background: red; }
<html> <div class="wrapper"> <div class="product"> Ahoj </div> <div class="product"> Ahoj </div> <div class="product"> Ahoj </div> <div class="product"> Ahoj </div> <div class="product"> Ahoj </div> <div class="product"> Ahoj </div> </div> </html>
2 個解決方案
解決方案1
0 2022-08-02 15:09:55
將 flex 替換為 grid，因為 14 以下的 safari 版本不支持 flex gap 使用：
display: grid;
grid-gap: 1rem;
gap: 1rem
解決方案2
0 2022-08-02 17:37:03
更新后 IOS（包括 safari）問題解決。
顯示 flex with::before pseudo 在 Safari 上不起作用
[英]Display flex with ::before pseudo not working on Safari
顯示：顯示后彎曲：在OSX上的Safari瀏覽器中斷點無顯示
[英]Display: flex from display: none in breakpoint not working in safari on OSX
'display：inline-flex'屬性在safari瀏覽器中不起作用
[英]'display: inline-flex' property not working in safari browser
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.