元素按钮不能作为 a 元素的后代出现答案

【问题标题】：The element button must not appear as a descendant of the a element元素按钮不能作为 a 元素的后代出现
【发布时间】：2014-09-10 07:20:28
【问题描述】：

请帮忙，在验证我的 html5 模板时，我通过 http://validator.w3.org/ 收到错误消息。我收到消息“元素按钮不得作为 a 元素的后代出现。”。我无法理解这一点。谁能帮我解决这个问题？

这是我的代码：

<div class="post-response btn-group btn-group-lg">
   <a href="#"><button type="button" class="btn btn-default"><i class="fa fa-comment"> 5  Comments</i></button></a>
   <a href="#"><button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button></a>
</div>

【问题讨论】：

给定的代码不可能触发此错误，因为您有一个 button 元素作为 button 元素的后代出现，而不是 a 元素作为a 元素。然而，这两种构造都不是有效的 HTML。
Can I nest a <button> element inside an <a> using HTML5?的可能重复
@BoltClock 你是对的，所以我刚刚编辑了这个问题。

标签： html anchor w3c-validation

【解决方案1】：

W3C 验证器的常见错误是：

元素按钮不得作为 a 元素的后代出现

这对您的问题更有意义，因为您有一个作为锚点后代的按钮。

通常，您可以通过简单地设置锚标记的样式或将按钮放在表单元素中来解决问题：

<form style="display: inline" action="http://www.example.com/" method="get">
  <button>Some Call to Action</button>
</form>

但在你的情况下，我认为你甚至不需要锚点，因为你没有使用 HTML 链接任何地方（如果你使用 JavaScript 附加事件，你可以简单地将这些事件附加到按钮而不是锚点.

【讨论】：

validator.w3.org/nu 可能出现错误（按钮不能在锚点内，锚点不能在按钮内）。目前我不确定如何获得我想要的效果，它是移动网站上漂亮的按钮导航，以及在 JavaScript 被禁用的情况下的故障转移......我相信我迟早会到达那里。