a标签内嵌button点击区域不匹配 如何让button点击范围与父a标签一致

实现方案说明 #

首先需要明确：HTML 规范不建议在<a>标签中嵌套<button>元素，二者均为原生可交互元素，嵌套会引发事件冲突、交互区域异常等兼容问题，优先建议调整结构避免嵌套。如果必须保留现有结构，可以参考以下方案解决可点击区域不一致的问题：

问题原因 #

你设置宽高100%后仍然只有小区域可点击，核心是两个问题：

• 空的<button>没有内容撑开默认尺寸，且默认自带margin、border、padding样式挤压空间
• 外层<a>如果是默认行内元素，子元素的百分比宽高找不到参考基准，同时<a>自身的内边距也会挤压内部button的可布局空间

方案1：绝对定位铺满（兼容性最好） #

直接让button脱离文档流，完全覆盖整个a标签的范围，不需要修改原有a的样式：

/* 给外层a加相对定位，作为button的定位基准 */
a.btn {
  position: relative;
}
/* 让button完全铺满a的区域 */
#btnLogin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

方案2：盒模型对齐 #

清理两个元素的默认边距，把内边距统一设置到button上：

a.btn {
  padding: 0;
  display: inline-block;
}
#btnLogin {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  /* 把原来a标签的内边距挪到这里，保证视觉效果和原来一致 */
  padding: 0.25rem 0.5rem;
}

更推荐的优化方案（符合语义规范） #

你需要的是点击触发服务端提交事件，完全不需要嵌套a标签，直接把现有a的样式移到button上即可，视觉效果完全一致，也不会有交互冲突：

<button id="btnLogin" type="submit" class="btn btn-success btn-sm btn-block" runat="server" onserverclick="btnLogin_ServerClick">
  <i class="fa fa-user"></i>&nbsp;LOGIN
</button>

内容的提问来源于stack exchange，提问作者EricCartman