保证金底部在iPhone或iPad上不起作用

如何解决保证金底部在iPhone或iPad上不起作用

我使用的是以下内容：WordPress版本：5.5.1 / PHP版本：7.4.9 / Bootstrap版本：3.3

这是我正在工作的网站：http://www.celebrantceremonies.com.au

我无法显示内联 <li>的网址，这些网址会溢出成几行（使用填充和背景色使它看起来像按钮）。我在margin-bottom: 10px;上添加了<li>，以防止它们太接近（触摸）列表包装后一行中出现的“按钮”。

Celebrant Ceremonies网站看起来像我想要的那样：

• Windows 10上的FireFox和Chrome浏览器（无论我使窗口大小多么小）
• Android手机

但是，当我在2部iPhone（IOS 13.4.1和IOS 13.6.1）和1部iPad（IOS 9.2.1）上进行测试时，底部空白在我要显示的特定列表上不起作用。在其中一部iPhone上，我同时使用Safari和Google浏览器浏览了该网站，并且都遇到了同样的问题。

因此，从我的测试来看，IOS（至少在较小的设备上）如何处理底部空白（例如，不仅限于野生动物园浏览器），似乎是一个问题。

要查看我创建的列表，请转到主页http://www.celebrantceremonies.com.au，然后向下滚动至底部，列出了很多金牌链接（排序看起来像圆形按钮）。

您也可以在葬礼页面http://www.celebrantceremonies.com.au/funerals-celebration-of-life-ceremonies/的侧栏中看到它们。

例如，这是在边栏上显示列表的html编码：

<ul class="tags-v4 margin-bottom-40">
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#funeral-services">funeral services</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#burial-services">burial services</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#graveside-services">graveside services</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#memorials">memorials</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#celebration-of-life">celebration of life</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#ceremonies">ceremonies</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#cremation-services">cremation services</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#scattering-of-ashes">scattering of ashes</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#melbourne-marriage-celebrant">melbourne celebrant</a></li>
<li><a class="rounded-4x" href="http://www.celebrantceremonies.com.au/#south-gibbsland-marriage-celebrant">south gibbsland</a></li>
</ul>

以下是设置列表样式的css编码：

ul,ol {
    margin-top: 0;
    margin-bottom: 10px;
}

.rounded-4x {
    border-radius: 20px !important;
}

ul.tags-v4 {
    text-align: center;
    padding-left: 0;
    list-style: none;
}

ul.tags-v4 li { 
    display: inline-block; 
    margin: 0 0 10px 0;
}

ul.tags-v4 a {
    color: #FFF;
    font-family: 'kabel_bk_btbook',verdana;
    font-size: 16px;
    font-weight: 400;
    padding: 6px 10px;
    border: 1px solid #962838;
}

.textwidget ul.tags-v4 a {
    background: #000000 none repeat scroll 0% 0%;
    margin-bottom: 10px;
    overflow: auto;
}

.col-md-9 ul.tags-v4 li a {
    background: #c5b358 none repeat scroll 0% 0%;
    margin-bottom: 10px;
    overflow: auto;
}

ul.tags-v4 a:hover {
    color: #FFF;
    font-family: 'kabel_bk_btbook',verdana;
    background: #c5b358 none repeat scroll 0% 0%;
    text-decoration: none;
    transition: all 0.25s ease 0s,transform 0.25s ease 0s;
}

.textwidget ul.tags-v4 a:hover {
    background: #c5b358 none repeat scroll 0% 0%;
}

.col-md-9  ul.tags-v4 a:hover {
    background: #000000 none repeat scroll 0% 0%;
}

任何人都可以给我一个建议，以使<li> margin-bottom在IOS设备上运行而又不会在所有其他设备上损坏它的情况吗？

干杯。