问题描述
我使用的是以下内容：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设备上运行而又不会在所有其他设备上损坏它的情况吗？
干杯。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）