iPhone 5S Mobile Safari 超链接不可“点击”答案

【问题标题】：IPhone 5S Mobile Safari Hyperlinks not 'clickable'iPhone 5S Mobile Safari 超链接不可“点击”
【发布时间】：2015-09-29 08:39:22
【问题描述】：

我一直在开发一个网站 (http://www.clicks1.co.uk/#Contact)。但是，我遇到了一个错误，其中页面上的许多“点击”交互在某些 Iphone 上不起作用，但在其他 iPhone 上起作用。我发现它在 Iphone 5 上完美运行，但在 Iphone 5s 上却不行。

特别是在联系人区域中，超链接的 facebook、twitter 和 google+ 图像在 iphone 5s 上点击时不会打开链接。

我的想法是，也许有某种元素覆盖在超链接上，阻止了任何按下它们的尝试。仍然不确定为什么这只是某些 iphone 而不是其他 iPhone 特有的问题。

【问题讨论】：

您可以在连接的 iPhone 或 iOS 模拟器上使用 Safari 的网络检查器。从那里开始。 moduscreate.com/enable-remote-web-inspector-in-ios-6

【解决方案1】：

解决方案是创建一个具有高 z-index 的不可见绝对定位 div。然后这个 div 被定位在原始超链接元素的上方，并被赋予了一个 href 链接。

<a href="example.com" style="width: 60px; height: 60px; position: absolute; background-color:rgba(0,0,0,0); z-index: 9999;"></a>

如果您像我一样想在动态大小的图像/文本上使用此解决方案，那么我发现提供宽度和高度参数 %（例如宽度：40%）值允许它们使用上面的元素调整大小。

【讨论】：

【解决方案2】：

这通常发生在超链接顶部有其他“不可见”元素时。

使用浏览器的开发工具检查链接并查看它选择了哪个 HTML 元素。如果它选择了超链接以外的另一个，则该元素很可能正在叠加。

有时是'clear:both;'只需在 mediaquery 上解决此类问题。

【讨论】：