HTML 错误自行反转：<button> in <a>，<a> in <button>

Question

我和我的团队目前正在开发一个网站，但我们在验证时遇到错误。 W3C 验证器说 button 不能是 a 的 child，因此我们将其反转，因此 a 是 button 的 child。然后验证器说 a 不能是 button 的 child。

我们如何解决这个问题以使其生效？我们还尝试创建一个 .button CSS class 并将其放入 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>

Answer 1

按钮内不能有 link。这没有意义，如果你仔细想想，一个 <button> 是一个应该 "do something" 的交互元素。锚元素 <a> 也是一种交互元素，可以将用户带到某个地方。如果将两者嵌套，则在同一个元素中有两个交互。如果你想要 link 上的按钮样式，你需要执行以下操作

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

HTML 错误自行反转：<button> in <a>，<a> in <button>

HTML error reverses itself: <button> in <a>, <a> in <button>

html

w3c-validation

hyperlink

htmlbutton