最稳解法是直接加 padding，因浏览器仅将 content box 与 padding box 视为可点击热区；行内元素需设 display: inline-block/block 才生效；推荐 box-sizing: border-box 与 padding: 12px 20px。
直接加 padding 是最稳的解法，别绕路
浏览器只把 content box + padding box 当作可点击热区，margin、transform、line-height 都不参与判定。加 padding 不是“视觉欺骗”，而是真实扩大事件响应范围。
- 纯行内元素（如
<a></a>、<span></span>）必须先设display: inline-block或display: block，否则垂直方向padding无效 - 所有可交互元素建议统一加
box-sizing: border-box，避免padding撑破总宽高 - 推荐起手值：
padding: 12px 20px（上下 12px × 2 + 行高 ≈ 44px 总高），短文本按钮（如“×”“是”）再补min-width: 44px - 别用百分比
padding，在flex容器里容易异常；优先用固定px或rem
::before 或 ::after 扩热区，三步缺一不可
伪元素本身默认不响应点击，也不能自动“撑开”热区——它只是视觉延伸，必须靠定位和事件透传配合才能生效。
- 目标元素（如
<button></button>）必须设position: relative - 伪元素要写
content: ""+position: absolute+inset: -12px（或等效top/left/right/bottom偏移） - 关键一步：
pointer-events: none必须加在伪元素上，否则它会拦截事件，真实元素收不到点击 - iOS Safari 对完全透明的伪元素有裁剪行为，可加极低透明度背景兜底：
background: rgba(0,0,0,0.001)
真机点不中？大概率是被父层或 CSS 干扰了
加了 padding 还点不中，往往不是样式没生效，而是热区被截断、遮挡或锁死。
- 父容器设了
overflow: hidden，直接裁掉padding区域 - 上层有透明伪元素或遮罩层（即使写了
pointer-events: none），实际仍挡住触摸 - 意外写了
touch-action: none，尤其在滚动容器里，直接禁用所有触摸响应 - 按钮嵌在
position: absolute+transform的父层中，视觉位置和热区错位 - 调试技巧：临时加
outline: 1px solid red，一眼看出实际响应边界是否被截断
min-height 和 transform: scale() 是坑，慎用
它们看起来能“撑大”或“放大”元素，但都不真正扩展浏览器认可的点击热区，还容易引入副作用。
-
min-height在flex或grid容器中容易触发意外拉伸，且 iOS Safari 对低于 44px 的min-height可能忽略点击 -
transform: scale()会等比缩小真实热区，文字可能模糊，点击坐标还会偏移 -
font-size和line-height不参与热区计算；仅调大它们，iOS 上实际点击高度仍可能只有 16–18px -
touch-action: manipulation不扩大热区，只减少点击延迟，必须和padding或伪元素方案配合用
touch-action 锁死——这些往往得靠真机录屏+触摸反馈叠加来验证，模拟器看不出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
