现代浏览器中<a>嵌套<div>合法且渲染一致，但IE及旧版WebView存在可访问性与交互问题：焦点导航受限、屏幕阅读器语义混乱、内部控件失效，且IE11需显式设display:block；移动端伪类与事件支持不稳；推荐用语义化结构替代。
<a> 嵌套 <div> 在现代浏览器（Chrome、Firefox、Safari、Edge 105+）中完全合法且渲染一致，但 IE 和部分旧版 WebView 会出问题——不是语法错误，而是语义与可访问性层面的断裂。
HTML5 允许嵌套，但浏览器解析逻辑没变
HTML5 规范明确允许 <a> 包裹块级元素，包括 <div>。但关键点在于：浏览器仍按“链接内容”语义解析整个包裹体，不会因为加了 <div> 就改变其行为边界。这意味着：
- 点击区域扩展到整个
<div>范围，但焦点/键盘导航仍只落在<a>上（Tab 键进入一次，而非每个子元素都可 tab） - 屏幕阅读器会把整个
<div>内容读作单个链接目标，比如“新闻卡片，标题为XXX，发布时间2026年8月，点击查看详情”——无法区分标题、摘要、时间等语义层级 - 若
<div>内含交互控件（如<button>、<input>），这些控件将被禁用或行为异常（尤其在 IE11 及更早版本）
IE11 及以下版本不渲染为可点击块，需额外处理
IE11 虽支持 HTML5 标签，但对 <a> 包裹块级元素的默认样式支持不完整：它不会自动给 <a> 设 display: block，导致内部 <div> 的宽高失效，点击热区仅限文字部分。
必须显式声明：
立即学习“前端免费学习笔记（深入）”；
code<a href="/post/123" style="display: block;">
<div class="card">
<h3>标题</h3>
<p>摘要</p>
</div>
</a>
否则在 IE11 中，<div class="card"> 可能塌缩成一行，甚至被截断。注意：display: inline（<a> 默认值）下，<div> 会被强制换行并脱离上下文流，造成布局错乱。
移动端 WebView 和 Safari 对 focus/active 状态支持不一致
某些 Android WebView（尤其基于旧 Chromium 版本）和 iOS Safari 14 之前，<a> 嵌套 <div> 后，:active 伪类可能不触发，或仅在文字区域生效；touchstart 事件监听也容易丢失。
稳妥做法是：
- 避免依赖
:active做视觉反馈，改用 JS 添加临时 class（如is-pressed） - 在
<a>上绑定touchstart+touchend，而非委托给内部<div> - 确保
<a>有明确的tabindex="0"（尤其当它本身不可聚焦时），否则键盘用户无法抵达
替代方案比强行兼容更可靠
如果你真正需要的是“整块区域可点击 + 内部结构语义清晰”，<a> 嵌套 <div> 是次优解。更推荐：
- 用
<article>或<section>包裹内容，内部放独立<a href>和<button type="button">，再用 JS 统一绑定跳转逻辑 - 若必须单链接主导，用
<div role="link" tabindex="0" onclick="location.href='/xxx'">，并补全onkeypress支持回车/空格 - 避免在
<nav>中把整个菜单项塞进一个<a>—— 这会让辅助技术无法识别导航层级
真正难处理的从来不是“能不能渲染”，而是“用户能否理解、能否操作、能否被正确朗读”。<a> 嵌套 <div> 容易让人忽略这三点。
