HTML链接无法在移动设备上点击，但可以在桌面上点击

Question

我在移动网站顶部有两个按钮时遇到问题 www.thefriendlydentist.ie

它们可以在桌面上点击，但在移动设备上我没有回复？

html放在WP主题的标题中。

<div id="topcontact-2" style="background-color:white;">
<a href="tel:012863787"><p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p> </a>
<a href="mailto:info@thefriendlydentist.ie"> <p style="background-color:white;padding:none;" class="call-button" id="email-button">  EMAIL US </p> </a>

</div>

Answer 1

HTML链接在移动设备上不可单击，但在桌面上可单击。 我有一个解决方案。试试这个

HTML

<a href="https://www.stackoverflow.com" class="goclick">

css

.goclick{
position: relative;
z-index: 9;
}

Answer 2

删除下面的代码块或显示：隐藏在主题中的移动设备上。

如果您使用移动设备工具栏查看桌面浏览器，您会看到这些元素填满所有页面，因此您的按钮会留在它们后面。

<div class="mobile-bg-fix-img-wrap">
    <div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>

您可以在图片中看到上述元素如何填充页面。

Answer 3

请进入您的CSS并进行此更改。

.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}

要：

.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}

顶部和左侧设置为0与两个按钮重叠，导致您无法单击它们。

Answer 4

为此，请转到Google Chrome > Developer tools。

检查元素，如果元素重叠，请添加clear: both;

到重叠元素。

实际上，在我的问题上，它解决了所有问题。

Answer 5

对我来说，我和...上了一堂课

z-index: -1

这将父项<div>强制向后移动。将其更改为0或简单地将其删除即可解决问题

ref：https://www.sitepoint.com/community/t/solved-href-not-working/248882/6