HTML 错误自行反转：<a> 中的 <button>，<button> 中的 <a>答案

【问题标题】：HTML error reverses itself: <button> in <a>, <a> in <button>HTML 错误自行反转：<a> 中的 <button>，<button> 中的 <a>
【发布时间】：2018-08-11 01:07:11
【问题描述】：

我和我的团队目前正在开发一个网站，但我们遇到了验证错误。 W3C 验证器说button 不能是a 的子代，所以我们将其反转，所以a 是button 的子代。然后验证器说a 不能是button 的孩子。

我们如何解决这个问题以便验证？我们还尝试创建一个.button CSS 类并将其放入a（删除button 标签），但这会破坏页面的所有格式。

<div class="row">
     <div class="column">
        <div class="card">
          <img src="images/tow.png" alt="Mike" style="width:100%">
          <div class="container">
            <h4>Trials of Wizardry</h4>
            <p>Some text that describes me lorem ipsum ipsum lorem.</p>
            <p><button class="button"><a href="http://store.steampowered.com">Buy Now!!</a></button></p>
           </div>
          </div>
        </div>
      </div>

【问题讨论】：

标签： html hyperlink w3c-validation htmlbutton

【解决方案1】：

按钮内不能有链接。如果您考虑一下，这没有任何意义，<button> 是一个应该“做某事”的交互式元素。锚元素<a> 也是一个交互元素，应该将用户带到某个地方。如果将两者嵌套，则在同一个元素中有两个交互。如果您想要链接上的按钮样式，您需要执行以下操作

<p><a href="http://store.steampowered.com" class="button">Buy Now!!</a></p>

【讨论】：