Andy 介绍了一种技术，其中语义 <button> 用于卡片组件中，但实际上，整个卡片都是可点击的。 技巧在于放置一个超出按钮的伪元素，覆盖整个卡片。 权衡是伪元素位于文本之上，因此文本选择受到了一些阻碍。 我认为这比将整个区域都设为 <button> 更好，因为那样会牺牲语义，并可能导致辅助技术出现极端怪异的情况。
查看 CodePen 上 Andy Bell 的示例
语义的、渐进增强的“突破”按钮 (@andybelldesign)
在 CodePen 上。
如果您的情况需要 <a> 链接而不是 <button>，则可以执行相同的操作，但如果是这种情况，您实际上可以将整个区域包装在链接中，而不会造成太多麻烦，然后将看起来像按钮的部分包装在一个 span 或其他元素中，使其看起来像按钮。
这让我想起了 嵌套链接问题：一个包含其他不同链接区域的大型链接块。 绝对不能嵌套锚链接。 Sara Soueidan 给出了 最佳答案，其中“覆盖”链接放置在卡片内部，并绝对定位以覆盖该区域，而内部的其他链接可以通过 z-index 分层在顶部。
我已将她的解决方案移至 CodePen 以供参考
查看 CodePen 上 Chris Coyier 的示例
嵌套链接解决方案 (@chriscoyier)
在 CodePen 上。
请注意，Firefox 中存在一个错误，即定位的子元素不会委派点击事件
https://bugzilla.mozilla.org/show_bug.cgi?id=562499
此错误直到最近才得到修复，并且可能尚未完全推出。
这是一个很巧妙的技巧，但我认为它在可访问性方面存在一些问题：它打破了用户的预期，因为看起来按钮是交互式元素，但令人意外的是，在 div 上随意点击其他地方也会发生一些意想不到的事情。 其次，在我测试的一个类似模式中，NVDA 没有读出链接文本（它是链接而不是按钮），我不确定这是否与不可选文本问题有关。 使用此技术的任何人都应该小心地在屏幕阅读器中对其进行测试。 我很想知道更彻底测试的结果，但（对我而言）具有误导性的界面让我不想使用它。
此选项为用户提供了简单性和便利性，这是一件非常好的事情
但是，您不允许用户突出显示文本以进行复制，这本身不是问题吗？
我不记得我最初在哪里找到了这个解决方法，但如果嵌套链接包装在
<object>中，则可以工作。因此，在不说明这是否是一个好主意的情况下，以下操作对链接内部的链接有效。
我讨厌人们这样做——如果我需要从图块中复制粘贴某些内容，就会变得非常麻烦。
我一直认为“可点击卡片内的人造按钮”模式很糟糕，因为它提供了意想不到的行为。 如果某些东西看起来像按钮，或者不像按钮，则应该表现得像那样。 对于可点击卡片，存在一些现有的模式可以提供更好的可用性，例如省略 CTA 上的按钮包装器，并在末尾添加箭头或省略号。 我们应该设计我们的界面使其行为可预测，而不是通过这种模式来强制模糊。
我不确定为什么要这样做。
如果文章是标签，则整个框对于按钮都是可点击的。