按钮默认为行内元素，宽度仅限内容，点击区域小；应设display: block+width: 100%撑满父容器，并用padding扩展热区至≥44×44px，配合box-sizing: border-box防溢出。
按钮默认宽度不够，点击区域太小
HTML 中 <button></button> 默认是 inline 元素，只占内容宽度，左右留白点就点不中。用户常误以为“按钮文字能点，旁边空白不能点”是正常行为，其实只是没设宽。
最直接的解法是让按钮撑满父容器：用 display: block + width: 100%。但要注意父容器本身得有明确宽度（比如 <div> 没设 <code>width 时，100% 才有意义）。
- 如果父容器是 flex 容器，
width: 100%可能被 flex 主轴约束，优先试flex: 1或min-width: 0 - 移动端需防缩放导致点击区变窄，加
touch-action: manipulation提升响应灵敏度 - 避免对
<button></button>直接设display: inline-block后又加width: 100%—— 这样会因 inline-block 的换行空格产生意外间隙
用 padding 扩大可点击热区，而非仅靠 width
光靠拉宽按钮还不够，手指点击有误差。真正友好的做法是保留视觉尺寸，靠 padding 向外扩展点击区域。比如按钮文字高 24px，设 padding: 12px 16px，实际可点高度就是 48px，远超文字本身。
注意：padding 会增加元素总尺寸，若父容器高度固定，可能溢出。此时建议配合 box-sizing: border-box（现代浏览器默认已启用，但老项目仍要检查）。
- 横向 padding 建议 ≥ 16px，符合 WCAG 触控最小尺寸推荐
- 垂直 padding 至少 12px，确保拇指点击不误触相邻元素
- 慎用
line-height替代 padding 控制高度 —— 它不增加点击热区，只影响文字垂直居中
禁用 pointer-events 导致整行失效
有时按钮明明写全了样式，却只有文字部分响应点击，大概率是祖先元素或自身被加了 pointer-events: none。这个属性会穿透所有鼠标/触摸事件，哪怕按钮本身设了 pointer-events: auto 也无效（继承不可逆）。
排查方法：在 DevTools 里选中按钮，看 Styles 面板中 pointer-events 是否为 none，再逐级往上查父元素。
- 常见于模态框遮罩层（
.overlay）误加了pointer-events: none，结果连下面的按钮都点不了 - 某些 UI 库组件内部用了
pointer-events: none做禁用态，但未正确切换回auto，需手动覆盖 - 绝对定位按钮若父容器设了
overflow: hidden且按钮超出范围，视觉被裁剪，但点击区域仍在 —— 这不是pointer-events问题，而是布局问题
用伪元素 hack 扩展点击区（兼容旧版 Safari）
极少数场景下，按钮内容动态变化（如图标+文字），无法预估宽度，又要求整行可点且不破坏原有布局流 —— 此时可用 ::after 伪元素撑开热区：
button {
position: relative;
}
button::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
这个伪元素盖在按钮下方、背景层之上，本身透明无视觉影响，但捕获点击事件。关键点在于 z-index: -1 必须生效，所以按钮自身不能是 position: static（即必须设 relative 或其它非 static 值）。
- IE11 不支持伪元素响应事件，如需兼容，改用
<span></span>包裹按钮再设宽 - 伪元素方案在 iOS Safari 15.4 之前有点击延迟 bug，需加
-webkit-tap-highlight-color: transparent - 别给伪元素加
background或边框，否则会干扰视觉，违背“仅扩热区”初衷
display: grid 或 flex 但没设 align-items: center，导致按钮被压缩成一行文本高度，再大的 padding 也救不回点击体验。
