android - 为移动设备创建链接的正确方法是什么？

Question

所以我有一个有趣的问题，我似乎无法弄清楚发生了什么。我从我最喜欢的地方之一购买了一个手机主题。除了一个区域，主题效果很好。右上角有一个图标，允许用户点击它，它会显示一些社交媒体共享图标，然后用户应该能够点击他们选择的图标并在适当的社交网站上分享。

在任何浏览器中，链接似乎都可以正常工作，但是当我使用我的 Droid 或平板电脑时，虽然显示/隐藏社交图标工作正常，但实际点击图标和共享链接的能力却不行。

这是该部分的代码:

<div class="shareDialog shareDialogMenu">
<div class="shareDialogArrow"></div>
<div class="shareDialogContent">
     <ul class="shareDialogIconList">
        <li><a href="mailto:?subject=Subject&body=Content"><div class="shareDialogMail"></div>Mail Link</a></li>

        <li><a href="http://m.facebook.com/sharer.php?u=<?php echo urlencode(curPageURL()); ?>" target="_blank"><div class="shareDialogFb"></div>Share Link</a></li>

        <li><a href="https://twitter.com/share?text=<?php echo urlencode($row['headline']); ?>&url=<?php echo urlencode(curPageURL()); ?>" target="_blank"><div class="shareDialogTwitter"></div>Tweet Link</a></li>
    </ul>
</div>
</div>

这些链接实际上可以在社交网络和任何浏览器中正确共享，但不能在移动设备上共享，并且链接结构似乎是标准的 href 标签。但我很困惑为什么实际的点击在移动设备上不起作用。任何想法或一双新的眼睛都会受到赞赏。

谢谢。

Answer 1

我认为问题可能出在 a 元素中的 div 元素上。

div 是 block 级元素，不能驻留在像 a 这样的内联元素中。尽管您可以使用 CSS 将有问题的 div 设置为 display: inline;

有些浏览器允许无效使用 block 和内联元素，有些浏览器会在 div 开始后简单地关闭 a 元素，这意味着您的文本实际上不会一个链接。

另一种解决方案是使用 span 而不是 div。

希望这是有道理的，并能帮助您解决问题。