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

Question

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

这是我的代码---

<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>

Answer 1

错误消息已经根据HTML5规范文档回答了您的疑问

您可以嵌套<a>除以下内容之外的任何元素:

<a>

audio> (如果存在controls属性)

<button>

<details>

<embed>

<iframe>

<img> (如果存在usemap属性)

<input> (如果type属性不处于隐藏状态)

<keygen>

<label>

<menu> (如果type属性处于工具栏状态)

<object> (如果存在usemap属性)

<select>

<textarea>

<video> (如果存在controls属性)

所以你需要使用一些css来设计一个Button(或者有很多方法),而不是添加Button内部a元素.

Answer 2

W3C验证器的常见错误是：

元素按钮不得显示为a元素的后代

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

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

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

但是对于您而言，我认为您甚至不需要锚，因为您没有使用HTML链接到任何地方（如果您使用JavaScript附加事件，则只需将这些事件附加到按钮上而不是锚上即可。