将功能正常的锚点 （<a>） 叠加在按钮顶部

问：

我意识到这个问题以前有人问过，但我找到的所有答案都归结为，“不要那样做。这是糟糕的设计“，并且没有为问题提供实际的解决方案。在我的特定场景中，我不认为这是一个糟糕的设计，并认为我会尝试再问一次。

我有一个表单，其中包含许多按钮，这些按钮是根据过去的用户操作填充的。我想要一种方法，让用户关闭不再需要的按钮。我的（失败的）解决方案是在按钮内放置一个，使用绝对定位将其放置在右上角。这是一个带有“x”的框。<div><a><img></a></div><img>

这里的问题是，单击图像会触发按钮，而不是点击将删除按钮的链接。

是否可以配置锚点，以便在单击锚点时跟随其链接而不是激活按钮？我正在寻找一种不需要javascript的解决方案。

非常感谢，

话筒

html（由 php 生成）将如下所示：

<form>
...
<button class='cached-action' name='resume' value='mmayer123'>
  <div class='username'>Mike Mayer</div>
  <div class='userid'>mmayer123</div>
  <div class='forget'>
    <a href='http://demo.org/mypage?forget=mmayer123'>
      <img src='img/delete.png'>
    </a>
  </div>
</button>
...
</form>

动作、演示和链接 url 都是虚构的，但希望能传达这个想法。

对应的 css 如下所示：

button.cached-action {
  width:100%;
  position:relative;
}
button.cached-action div.action {
  font-weight:bold;
  text-align:left;
  margin: 5px 8px 0 8px;
}
button.cached-action div.details {
  font-size:small;
  text-align:left;
  margin: -3px 8px 0 10px;
}
button.cached-action div.forget {
  position:absolute;
  top:5px;
  right:5px;
}
button.cached-action div.forget img {
  height:12px;
  width:12px;
}