直接给<a>加padding并设display:inline-block或display:block是最简单有效的解法；因为原生<a>是行内元素，默认仅包裹文字、点击高度仅16–18px，远低于44px触控底线，必须显式撑开尺寸才能使padding区域纳入可点击热区。
直接给 <a> 加 padding 并设 display: inline-block 或 display: block，是最简单有效的解法；光靠 font-size、line-height 或 margin 都不能真正扩大热区。
为什么 <a> 默认点击区域小得离谱
原生 <a> 是行内元素，默认只包裹文字内容。iOS Safari 实测，未加样式时点击高度常只有 16–18px，远低于 44px 的触控底线。它不继承父容器高度，line-height 在 overflow 受限或字体异常时还会被截断，根本不可控。
-
font-size只放大文字，不扩展可点击区域 -
line-height不是高度声明，只是行间距，无法保证上下留白 -
margin完全不参与事件响应，纯属布局偏移 - 真机上点不中，大概率不是手抖，而是热区压根没覆盖到手指落点
<a> 必须显式撑开尺寸才能生效
哪怕 HTML 里写的是 <a href="#">登录</a>，也得靠 CSS 给它“分配空间”，否则浏览器不会把 padding 区域纳入点击热区。
- 必须设
display: inline-block（推荐）或display: block——让padding和min-height生效 - 加
padding: 12px 16px，比单纯依赖min-height更稳妥，兼顾左右触控余量 - 移动端务必加
min-height: 44px，兜底防止字体缩放或渲染异常导致塌陷 - 避免用
width/height固定尺寸——会破坏流式布局，且对响应式不友好
三个容易静默失效的 CSS 干扰项
结构和尺寸都对了，但真机一点没反应？问题往往藏在“看不见”的样式里：
立即学习“前端免费学习笔记（深入）”；
-
touch-action: none—— 放在<a>或其任意父容器上，会彻底禁用点击穿透，连click事件都不触发 -
user-select: none—— 某些 Android WebView 下会连带抑制click冒泡；如需禁选，改用-webkit-user-select: none+-moz-user-select: none，保留标准属性为text -
pointer-events: none—— 父级或自身设了这个，等于主动关掉整个热区，连 outline 都点不亮
Flex 布局下链接全高填充的实操要点
导航栏常用 Flex，但 <a> 默认不占满父容器高度，导致顶部/底部大片空白不可点。
- 父容器（如
<nav>或<ul>）需设height: 100%或明确高度 -
<a>加min-height: 100%+display: flex+align-items: center，垂直居中且撑满 - 禁用
vertical-align（默认baseline会导致错位），尤其当旁边有图标或 SVG 时 - 别用
transform: translateY()居中——热区不随视觉位置移动，点不到
最易被忽略的是：即使用了 Flex，如果父容器设置了 overflow: hidden 且子元素因 align-items: flex-end 被挤出视口，那部分热区就真的“消失”了——不是不响应，是根本不在可交互范围内。
