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

刪除下面的代碼塊或 display:hidden on mobile 在您的主題中。

如果您使用移動設備工具欄查看桌面瀏覽器，您將看到這些元素填充了所有頁面，因此您的按鈕位於它們之后。

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

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

Answer 2

請進入您的 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 3

HTML 鏈接在移動設備上不可點擊，但可在桌面設備上點擊。 我有一個解決方案。 嘗試這個

html

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

css

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

Answer 4

為此，請轉至 Google Chrome > Developer tools 。

檢查元素，如果它被任何東西重疊，添加clear: both;

到重疊元素。

實際上，在我的問題中，它解決了所有問題。

Answer 5

對我來說，我有一堂課...

z-index: -1

這迫使父<div>回到后面。 將此更改為0或簡單地將其刪除，解決了問題

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