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

我建议问题可能出在div元素中的a元素。

div是块级元素，不能驻留在内联元素中，如a s。虽然您可以使用CSS将相关div设置为display: inline;

某些浏览器允许无效使用块和内联元素，有些浏览器会在a启动后关闭div元素，这意味着您的文本实际上不是链接。

另一种解决方案是使用span代替div。

希望这有意义，并帮助您解决问题。

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

1 个答案: