根本原因在于 <a> 默认是 inline 元素，其点击热区受行高、基线对齐和父容器空白符影响；实操应将 <a> 设为 display: block 或 inline-block，避免对 <img> 错误设置 display: flex 或过大 padding-left，并用容器控制尺寸。
为什么图片链接总在视觉边界外触发
根本原因在于 <a> 默认是 inline 元素，而 <img> 作为替换元素，其点击热区会受行高（line-height）、基线对齐（vertical-align: baseline）和父容器空白符影响。哪怕图片本身只有 24×24px，左侧空出 30px 仍能跳转，就是典型表现。
实操建议：
- 把
<a>设为display: block或display: inline-block，彻底脱离行内流 - 避免给
<img>自身设display: flex（无效值）或过大padding-left - 用容器控制尺寸：比如
.logo-container { max-width: 100px; max-height: 100px; }，再让内部<a>占满
button 和 label 的热区为何在 iOS 上静默失效
iOS Safari 对触控目标有硬性要求（≥44×44px），且对几个 CSS 属性极其敏感。不是“没写样式”，而是写了反而阻断事件。
常见失效组合：
立即学习“前端免费学习笔记（深入）”；
-
touch-action: none：直接禁用点击穿透，<label>点文字无反应，点<input>却可以 -
pointer-events: none（或任意父级设置了它）：整块区域失活，连outline都不触发 -
overflow: hidden父容器 +border-radius：热区被裁切，圆角部分点不中 -
<label>内部<input>不是直接子节点（比如中间有换行或<span>）：隐式关联断裂，热区不扩展
怎样安全扩大微小按钮的点击范围
只调 font-size 或 width/height 没用——前者只放大文字，后者对 <button> 这类替换元素在部分 WebView 中被忽略。真正起效的是 padding + display 控制。
必须做的三件事：
- 显式声明
display: inline-block或display: block（<button>默认是inline-block，但一旦被重置为inline，旧版 Safari 会丢掉上下 padding） - 用
padding扩展热区，配合min-height: 44px（移动端兜底，尤其文字短时） - 禁用干扰项：
touch-action: manipulation可保留默认行为，但绝不能写none
如何验证热区是否真的准确
桌面端能点中 ≠ 移动端可用。真机测试时盯住三个信号：
- iOS Safari 中，
<label>文字点击无反应，但点<input>本身可以 → 查touch-action和父级z-index - 两个按钮之间“缝隙”能跳转，尤其缩放后 → 检查是否用了
padding模拟间距，实际热区已溢出 - 开发者工具里高亮框明显超出视觉边界（如左侧多出 20px 仍触发）→ 说明
<a>或<button>仍处于inline流，未脱离行高影响
computed styles 要看真实生效值，不是写在 CSS 文件里的那行；热区失控往往藏在继承链最上游的 reset.css 或框架默认样式里。
