javascript - 在非 anchor 元素上渲染推文按钮

Question

我有一个包含各种元素的 anchor ，因为它使其触摸友好并且是有效的 html5:

<a href="whatever.html">
   <h2>Title</h2>
   <p>Paragraph</p>
</a>

现在，我想向该 anchor 添加一个推文按钮。然而，嵌套 anchor 在html5中是无效的。因此，这会将 Twitter iframe 渲染到 anchor 之外:

<a href="whatever.html">
   <h2>Title</h2>
   <p>Paragraph</p>
   <a href="https://twitter.com/share" class="twitter-share-button">...</a>
</a>

如果我更改标记以表示类似这样的内容，它将不会呈现按钮:

<a href="whatever.html">
   <h2>Title</h2>
   <p>Paragraph</p>
   <div class="twitter-share-button">...</div>
</a>

facebook like 按钮渲染良好，因为它不需要 anchor 元素即可工作。有人知道 Twitter 的解决方法吗？这是jsfiddle:http://jsfiddle.net/xdEwg/

Answer 1

最后，我通过将其放在 anchor 之外并使用绝对位置来可怕地破解了这个问题，例如......

<div class="module">
  <a href="whatever.html">
    <h2>Title</h2>
    <p>Paragraph</p>
  </a>
  <a href="https://twitter.com/share" class="twitter-share-button">...</a>
</div>

.module {
  position: relative; 
}
.twitter-share-button {
  position: absolute;
  bottom: 0;
}

但我仍然对解决方法感兴趣。