可点击的电话按钮.svg样式表不点击

Question

您好我在手机上遇到问题，因为它可以触摸拨打图像下方的号码。从样式表中调用图像。它在Chrome桌面上工作正常但在移动设备上绿色呼叫按钮（右下方）在移动设备上运行良好。它似乎也不是坐在页面顶部。

网站：bittersweetcafe.com.au

.callnowbutton {
  
    width: 100px;
    right: 0;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    height: 80px;
    bottom: -20px;
    border-top: 2px solid #2dc62d;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjAgNjAiPjxwYXRoIGQ9Ik03LjEwNCAxNC4wMzJsMTUuNTg2IDEuOTg0YzAgMC0wLjAxOSAwLjUgMCAwLjk1M2MwLjAyOSAwLjc1Ni0wLjI2IDEuNTM0LTAuODA5IDIuMSBsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDE2LjUgMTcuNCAxOS44IDE5LjhsMTYuODEzIDEuMTQxYzAgMCAwIDAuNCAwIDEuMSBjLTAuMDAyIDAuNDc5LTAuMTc2IDAuOTUzLTAuNTQ5IDEuMzI3bC02LjUwNCA2LjUwNWMwIDAtMTEuMjYxIDAuOTg4LTI1LjkyNS0xMy42NzRDNi4xMTcgMjUuMyA3LjEgMTQgNy4xIDE0IiBmaWxsPSIjMDA2NzAwIi8+PHBhdGggZD0iTTcuMTA0IDEzLjAzMmw2LjUwNC02LjUwNWMwLjg5Ni0wLjg5NSAyLjMzNC0wLjY3OCAzLjEgMC4zNWw1LjU2MyA3LjggYzAuNzM4IDEgMC41IDIuNTMxLTAuMzYgMy40MjZsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDUuMyA2LjkgOS4xIDEwLjY5OWMzLjg0MiAzLjggNy40IDYuNyAxMC43IDkuMSBsNC43NC00Ljc0MmMwLjg5Ny0wLjg5NSAyLjQ3MS0xLjAyNiAzLjQ5OC0wLjI4OWw3LjY0NiA1LjQ1NWMxLjAyNSAwLjcgMS4zIDIuMiAwLjQgMy4xMDVsLTYuNTA0IDYuNSBjMCAwLTExLjI2MiAwLjk4OC0yNS45MjUtMTMuNjc0QzYuMTE3IDI0LjMgNy4xIDEzIDcuMSAxMyIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) center 2px no-repeat #090;
    box-shadow: 0 0 5px #888;
    z-index: 9999;
    background-size: 58px 58px;
    position:fixed;
    
}

			<a href="tel:0394974144">
<div class="callnowbutton">
	
</div></a>

Answer 1

我建议如下：

<div class="callnowbutton">
    <a href="tel:0394974144"></a>
</div>

根据http://stackoverflow.com，您需要添加＆＃34; -webkit-backface-visibility：hidden;＆＃34;到 .callnowbutton 类：

.callnowbutton {
    /* your code here */
    -webkit-backface-visibility:hidden;
}

它有助于：

.callnowbutton a {
    display: block; 
    width: 100%;
    height:100%;
}