Html 外部链接不'；我不能在iOS中工作

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

每个项目都是一个围绕图像、h1和一些p标签的链接。我们在iOS上遇到了一个非常奇怪的问题。该链接将打开一个新的浏览器窗口。当我们在iPhone4上点击一些链接时——比如页面上当前最上面的两个示例——十有八九的时候，我们会在iOS顶部状态栏中短暂地看到一个小小的加载图标，然后就什么都没有了。获取链接的唯一方法是点击并按住，直到您获得Safari的“打开/打开新页面”对话框。另一方面，当我们点击一些其他链接时，新窗口会像您预期的那样立即打开。如果你在iPhone4上尝试，你应该明白我的意思

我仔细比较了正常工作的项目和不可靠的项目的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改为，或者它停止工作时。当我把它设置为它的工作。在iOS上，Safari mobile会呈现内容。它的行为与桌面safari非常不同。 我认为错误是从使用移动safari无法理解的命令开始的。在代码溢出中：auto就是其中之一。 但请参见此处的公认解决方案：

另外，如果您使用的是javascript，请注意并非所有事件都由mobile safari处理。如果你注意到奇怪的行为，我会先围绕这些问题展开调查。例如，有些事件根本没有触发，或者因为没有实现而立即触发。这是一个很深的兔子洞

---

我希望这能有所帮助。

在iOS上，Safari mobile会呈现内容。它的行为与桌面safari非常不同。 我认为错误是从使用移动safari无法理解的命令开始的。在代码溢出中：auto就是其中之一。 但请参见此处的公认解决方案：

另外，如果您使用的是javascript，请注意并非所有事件都由mobile safari处理。如果你注意到奇怪的行为，我会先围绕这些问题展开调查。例如，有些事件根本没有触发，或者因为没有实现而立即触发。这是一个很深的兔子洞

---

我希望这能有所帮助。

我们似乎已经找到了答案——iOS Safari的弹出窗口拦截器正在阻止链接。一位同事在他的iphone5s上尝试了相同的页面，并遇到了相同的行为。他还注意到，当他在那里尝试链接时，他的桌面Chrome阻止了弹出窗口。当我在iOS Safari中关闭弹出窗口阻止时，它们工作得很好。另外，当我从链接中删除target=“\u blank”属性时，它们在弹出窗口阻塞的情况下工作良好。使用JavaScript将target=“\u blank”添加到链接没有帮助

---

从这次经历中得出的结论是，iOS Safari使用一个空白目标来阻止外部链接。

我们似乎已经找到了答案——iOS Safari的弹出窗口阻止程序正在阻止链接。一位同事在他的iphone5s上尝试了相同的页面，并遇到了相同的行为。他还注意到，当他在那里尝试链接时，他的桌面Chrome阻止了弹出窗口。当我在iOS Safari中关闭弹出窗口阻止时，它们工作得很好。另外，当我从链接中删除target=“\u blank”属性时，它们在弹出窗口阻塞的情况下工作良好。使用JavaScript将target=“\u blank”添加到链接没有帮助

---

从这次体验中得出的结论是，iOS Safari使用一个空白目标阻止外部链接。

谢谢Zoltan，这很有帮助。好的和不好的版本都有相同的溢出规则，当我删除它时，我仍然会遇到问题，所以我不确定是不是这样。谢谢Zoltan，这很有帮助。好的版本和不可靠的版本都有相同的溢出规则，当我删除它时，我仍然会遇到问题，所以我不确定是不是这样。