label点击触发焦点在safari和chrome中表现不一致：safari（尤其15.4–16.x）在嵌套深或transform容器下可能不触发焦点，chrome则可能强制scrollintoview；firefox对for属性与嵌套的优先级处理与其他浏览器不同；辅助技术读取label依赖渲染后可访问名称，受css截断、display:none或aria-hidden影响。
label 点击触发焦点在 Safari 和 Chrome 中表现不一致
点击 label 文本后，对应 input 是否获得焦点、是否自动滚动到可视区域、是否触发 focus 事件，各浏览器有细微差别。Safari（尤其 15.4–16.x）在表单嵌套较深或使用 transform 容器时，可能不触发焦点；Chrome 则更激进，有时会强制 scrollIntoView，干扰自定义滚动逻辑。
关键点在于：浏览器对「可聚焦元素是否在视口内」的判断逻辑不同，且 Safari 对 label 的事件冒泡处理更保守。
- 确保关联控件本身是可聚焦的（
tabindex="-1"会破坏该行为） - 避免在
label或其父容器上设置overflow: hidden+transform组合，这会让 Safari 无法正确计算焦点位置 - 如需精确控制焦点后行为，不要依赖原生触发，改用
label.addEventListener('click', () => input.focus())显式调用
for 属性与隐式嵌套在 Firefox 中的优先级冲突
当 label 同时满足两个条件：① 包含 for 属性，② 内部又嵌套了表单控件，Firefox 会优先按 for 关联（即忽略内部嵌套），而 Chrome 和 Safari 多数情况下按嵌套关系处理——这会导致同一段 HTML 在 Firefox 中点击 label 文本，焦点却跳到另一个 id 匹配的控件上。
这不是 bug，而是规范允许的实现差异：for 是显式绑定，优先级理论上高于隐式结构，但各引擎解析时机和 DOM 构建顺序不同。
- 永远不要同时使用
for和嵌套——选一种方式并坚持到底 - 动态生成表单时，若用 JS 设置
for，务必确保目标id已存在于 DOM 中，否则 Firefox 可能静默失败 - 测试时重点检查 Firefox 的焦点流向，用
document.activeElement实时验证
辅助技术读取 label 文本时的截断与换行问题
屏幕阅读器（如 VoiceOver、NVDA）对 label 内容的朗读行为受 CSS 影响比想象中大。如果 label 内文本被 white-space: nowrap 或 text-overflow: ellipsis 截断，部分版本的 VoiceOver（macOS 14+）会只读可见部分，而非完整 DOM 文本；而 NVDA 在 IE11 模式下反而会读全内容。
根本原因是：辅助技术读取的是渲染后文本节点的“可访问名称（Accessible Name）”，它由视觉呈现和 ARIA 规则共同决定，不是简单取 innerHTML。
- 禁用
text-overflow/clip类样式作用于label元素 - 如需隐藏视觉标签但保留语义，用
class="visually-hidden"（含position: absolute; clip: rect(1px, 1px, 1px, 1px)）包裹文本，而非直接对label设样式 - 避免在
label中混用<br>
或块级元素，某些旧版 JAWS 会跳过换行后的文字
label 关联多个控件时的兼容性陷阱
HTML5 规范已移除「一个 label 可通过 for 关联多个控件」的明确支持，但 Chrome 和 Edge 仍保持该行为（例如 for="a b c" 用空格分隔多个 id），Firefox 则只认第一个，Safari 直接忽略整个 for 值并退化为无关联。
这种写法在 caniuse.com 上查不到，因为它是非标准扩展，且没有 polyfill 能修复——浏览器解析阶段就决定了是否识别。
- 绝对不要写
for="id1 id2"，即使 Chrome 当前能工作 - 需要多控件响应同一标签？用 JS 绑定 click 事件，手动调用每个控件的
focus()或click() - 若必须语义化表达“该标签覆盖一组选项”，改用
<fieldset><legend>...</legend></fieldset>结构，这是无障碍标准做法
label 的可访问名称计算完全依赖渲染树状态——哪怕 DOM 正确，只要某个父容器 display: none 或 aria-hidden="true" 泄漏影响，屏幕阅读器就读不到它。别只测点击，一定要开 VoiceOver/NVDA 实时听。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
