必须用包裹实现图片跳转，因不支持href属性；常见失效原因包括pointer-events:none、overflow:hidden裁剪、src加载失败，且alt属性不可缺失。
为什么 @#@#@#@#@#@#@#@#@#@0 大部分情况下能跳转，但常见失效场景有：图片被 CSS 设置了 pointer-events: none、父容器有 overflow: hidden 且 img 溢出被裁剪、或 img 加了 display: block 后意外触发某些浏览器对空链接的拦截逻辑。更隐蔽的是，如果 <img> 的 <code>src 加载失败（404 或跨域拒绝），部分旧版 Safari 会把整个 <a></a> 当作“无内容可交互”而禁用点击。
<a></a> 嵌套 <img src="a.jpg"> 的合法性和语义要求
<a></a> 嵌套 <img src="a.jpg"> 的合法性和语义要求
HTML5 允许 <img> 作为 <a></a> 的唯一子元素，但必须满足两个隐性条件：
-
<img>必须有alt属性（即使为空alt=""），否则在无障碍检测或严格校验下会被警告 - 避免给
<a></a>同时设置href和onclick，否则可能触发重复跳转或阻止默认行为 - 不要给
<img>设tabindex="-1"，否则键盘用户无法聚焦该链接
实际部署时推荐加上的三处防护
不是所有环境都默认可靠，尤其在 CMS 输出或第三方组件注入后：
- 显式声明
<a href="xxx" role="link"></a>，补全 ARIA 角色，防止某些屏幕阅读器误判 - 为
<img>加loading="eager"（尤其首屏图），避免 lazyload 导致初始不可点击 - 在 CSS 中重置可能干扰的样式：
a img { pointer-events: auto; }
替代方案：什么时候不该用嵌套？
当需要监听图片点击前做判断（比如登录态校验、埋点上报、防重复点击），硬塞 onclick 到 <a></a> 里容易和 href 冲突。此时更稳妥的是：
- 用
<img>自身绑定onclick，内部调用window.location.href = "xxx" - 或用
<button type="button"></button>包裹<img>，再通过 JS 跳转，语义更清晰且可控性强 - 注意：若用 JS 跳转，记得加
target="_blank"逻辑时手动加rel="noopener"防安全漏洞
嵌套本身很简单，但真正出问题的，往往不是语法，而是它被塞进某个带遮罩层的轮播组件、或被某段全局 CSS 无声覆盖了事件响应区域。
