Question

我们的网站在WordPress上运行。在this page上，我们有一系列文本小部件，每个小部件包含一大块HTML和内联CSS。它有点粗糙，但它允许我们为营销人员提供一个简单的模板，他们可以用来添加新项目。

每个项目都是一个环绕图像的链接，一个h1和一些p标签。我们在iOS上遇到了一个非常奇怪的问题。该链接应该打开一个新的浏览器窗口。当我们使用iPhone 4并点击一些链接时 - 就像当前页面上的前两个例子 - 十分之九的我们在iOS顶部状态栏中短暂获得一个小的加载图标，然后没有别的。获取链接响应的唯一方法是点击并按住，直到您在新页面对话框中获得Safari的开放/打开。另一方面，当我们点击其他一些链接时，新窗口会立即打开，如您所料。如果你在iPhone 4上试试，你应该明白我的意思。

我仔细比较了正常工作的HTML和狡猾的项目，除了内容差异外，它们看起来几乎完全相同。这是一个标记的例子，可以正常工作：

<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">    
    <a target="_blank" href="http://yourworld.metro.co.uk/" style="text-decoration:none;color:#333333;font-family:Arial, Helvetica;">

        <img src="http://metrouk2.files.wordpress.com/2013/07/ay_113922733.jpg" style="float:left;margin-right:6px;" alt="directline" />

        <h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN PRIZES WITH YOUR PICS!</h1>    

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every week in Metro’s Your World we'll set you a photo challenge and feature the best submissions in our digital editions. And, for the whole of July we're giving away Samsung Galaxy cameras AND Amazon vouchers for the best photos! Check out this week’s challenge and submit your photos here.</p>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>

    </a>
</div>

这是一个有奇怪行为的人：

<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
    <a target="_blank" href="http://intu.co.uk/lakeside/competition/metro" style="display:block;text-decoration:none;color:#333333;font-family:Arial, Helvetica;">

        <img src="http://metrouk2.files.wordpress.com/2013/11/comp-module.jpg" style="float:left;margin-right:6px;" alt="directline" />

        <h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN £2,000 to spend at intu Lakeside</h1>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every day this week, Metro is teaming up with intu Lakeside shopping centre to offer five lucky readers the chance to win a gift card with a whopping £2,000 to spend at the centre. For your chance to win, click here. Competition opens Monday 2nd December.</p>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>

    </a>
</div>

任何人都可以解释这种奇怪的情况或建议修复吗？我一直注意到其他链接上的类似问题。也许这是一个iOS错误？

=============== 修改

我应该提一下，我已经尝试更改列表中项目的顺序，以防页面上有一些阻碍触摸事件的不可见元素。我还在我的测试WordPress网站上的虚拟列表中添加了相同的项目。我已经尝试更改CSS，包括容器上的溢出样式，以及h1和p标签中的文本。所有这一切都没有改变。

=============== 修改

这与链接的href有关。当我将狡猾的项目的href更改为与好项目相同时，它突然正常工作。奇怪的是，当我将href更改为http://google.com，http://yahoo.com或http://bbc.co.uk时，它就会停止工作。当我将其设置为http://metro.co.uk时，它可以正常工作。 WTF ???

Answer 1

我们似乎找到了答案 - iOS Safari的弹出窗口拦截器阻止了链接。一位同事在他的iPhone 5S上尝试了相同的页面并遇到了同样的行为。他还注意到他的桌面Chrome在尝试链接时阻止了弹出窗口。当我在iOS Safari中关闭弹出窗口阻止时，它们运行良好。此外，当我从链接中删除target =“_ blank”属性时，它们在弹出窗口阻塞时工作正常。使用JavaScript向链接添加target =“_ blank”没有帮助。

此体验的结论是iOS Safari会阻止带有_blank目标的外部链接。

Answer 2

在iOS上，Safari移动版会呈现内容。它的行为与桌面游猎非常不同。我认为错误始于使用移动safari无法理解的命令。在您的代码溢出中：auto就是其中之一。但请在此处查看已接受的解决方案：Overflow-x value ignored in mobile safari

此外，如果您使用的是javascript note，并非所有活动都由移动版Safari处理。如果你注意到奇怪的行为，我会首先围绕这些问题展开调查。例如。有些事件根本没有开火，或者他们因为没有实施而立即开火。这是一个非常深的兔子洞imho。

我希望它有所帮助。

外部链接在iOS中不起作用

2 个答案: