本质是视觉区域与DOM边界盒不一致：按钮因position: relative、top: 0或未约束的padding/margin向上偏移，导致悬停检测命中上方元素；应语义隔离交互元素、强制触控区域达标、真机验证DOM层级。
为什么移动端按钮和链接会“点错位置”
这不是浏览器 bug，也不是代码写错了。本质是视觉区域和 DOM 边界盒不一致：你看到的按钮在下方，但它的 bounding box 因为 position: relative、top: 0 或未约束的 padding/margin 向上偏移，导致开发者工具里鼠标悬停检测命中了上方元素——尤其是当它们同属一个 flex-direction: column 容器时。
常见错误现象包括：
- 点击按钮下方空白处却跳转到分享链接
- Inspect 模式下高亮区域明显比视觉大一圈
- 在 iOS Safari 中更易复现，Android Chrome 相对稳定
根本原因不是 CSS 写得不够细，而是把语义不同、交互独立的元素（比如 <button></button> 和 <a></a>）强行塞进同一个 flex 容器做流式排列。
用语义隔离代替视觉堆叠
别让 <button></button> 和 <a></a> 共享父级 flex 容器。哪怕视觉上它们紧挨着，DOM 结构也该分离：
立即学习“前端免费学习笔记（深入）”；
<div class="action-group"> <button type="button">提交</button> </div> <div class="share-group"> <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c">分享</a> </div>
这样做的好处：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 每个容器可独立控制
min-height、padding和定位方式 - 避免
flex的交叉轴拉伸或基线对齐干扰点击区域 - 即使加了
transform: translateY()，也不会影响兄弟元素的边界盒判定
如果必须保持视觉紧凑，用 gap 替代 margin，并确保两个容器的 display 值不触发隐式 align-items: stretch。
强制触控区域达标且不重叠
WCAG 2.2 明确要求最小触控目标为 44px × 44px，但很多项目只靠 font-size 或 height 应付，结果是视觉够大、实际可点区域仍不足。
正确做法是：
- 所有可交互元素都加
min-width: 44px和min-height: 44px - 用
padding扩展点击区，而不是仅调大font-size - 避免相邻元素的
padding或margin形成“共享边距”，导致边界盒紧贴甚至重叠 - 检查是否误设了
pointer-events: none在父层，它会透传事件但破坏边界盒计算逻辑
特别注意：iOS Safari 对 touch-action: manipulation 敏感，若父容器设了这个值，子元素即使有 min-height 也可能被压缩判定区域。
真机测试前必查的三个 DOM 层级信号
很多误触问题在桌面模拟器里完全不显，只有真机 + VoiceOver/TalkBack 开启后才暴露。上线前快速验证这三点：
- 打开 Chrome DevTools → Elements → 右键任意按钮 →
Show DOM properties→ 查看depth值，超过 6 层就重构，深层嵌套会让touchstart响应延迟翻倍 - 确保所有按钮都是原生
<button></button>，不用div+role="button"，后者在部分 WebView 中无法触发:active或键盘回车 - 检查
和是否设置了overflow: hidden或height: 100%，这会干扰 Safari 对可缩放内容的判断，间接导致 touch 区域坐标偏移
真正难处理的，从来不是怎么让按钮变大，而是怎么让它的 DOM 边界盒和你眼睛看到的位置严丝合缝。
