track元素本身不渲染DOM节点，字幕重叠实为浏览器原生渲染层对行高、字体度量或定位的错误计算，常见于中英文混排、字体回退异常或GPU渲染缺陷。
track 元素本身不会导致文字重叠——它不渲染任何 DOM 节点，也不参与布局。你看到的“字幕文字重叠”，实际是浏览器原生字幕渲染层（由 video 内部 UI 控制）在特定条件下对行高、字体度量或定位的错误计算，常见于中英文混排、非标准字体回退或 GPU 渲染异常。
为什么 Chrome/Firefox 字幕会垂直堆叠或挤成一行
原生字幕渲染不走 CSS 流程，而是由浏览器媒体引擎直接绘制文本行盒。当以下任一条件触发，就容易出现文字重叠：
- 系统缺失对应语言的字体（如网页声明
srclang="zh"，但 Windows 上没装微软雅黑/苹方，回退到 Times New Roman，其中文度量为 0） - WebVTT 文件里用了非标准换行（比如用
\r\n混合\n，或含不可见 Unicode 控制符） - 浏览器启用了硬件加速，但显卡驱动与 Chromium 的文本光栅化模块存在兼容缺陷（尤其 Win10/11 + Intel 核显）
-
video父容器设置了transform、filter或opacity: 0.99，意外创建了新层叠上下文，干扰字幕层定位
硬性刷新和禁用 GPU 加速能立刻见效
这不是玄学，而是绕过损坏的字体缓存和 GPU 文本光栅器。实操步骤：
- Windows/Linux：按
Ctrl + F5强制清空样式与字体缓存再加载 - macOS：按
Cmd + Shift + R - 关闭硬件加速：
chrome://settings/system→ 关掉“使用硬件加速” → 重启浏览器 - 若仍无效，在浏览器快捷方式目标末尾加参数：
--disable-gpu --disable-direct-composition
WebVTT 文件里藏着重叠的根源
哪怕只多一个空格、少一位毫秒、带个 BOM，都可能让浏览器解析错行高。必须逐项核对：
立即学习“前端免费学习笔记（深入）”；
- 首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT - 时间戳严格为
00:00:01.234 --> 00:00:04.567（三位毫秒，不能是.23或.2345） - 每段字幕之间用**两个连续换行符**分隔，不能有空格或注释行
- 文件保存为 UTF-8 无 BOM（VS Code 右下角点击编码 → “Save with Encoding” → 选 UTF-8）
- 服务器返回
Content-Type: text/vtt（Nginx 配置：types { text/vtt vtt; }）
真正可控的修复：放弃原生字幕，用 JS + div 模拟
原生字幕在移动端（尤其是 iOS Safari）和跨设备一致性上根本不可靠。更稳的做法是监听 textTracks，手动把 cue 文本注入 DOM：
const track = video.textTracks[0];
track.mode = 'hidden'; // 关掉原生渲染
track.oncuechange = () => {
const cue = track.activeCues[0];
if (cue) {
subtitleDiv.textContent = cue.text;
subtitleDiv.style.lineHeight = '1.6'; // 显式控制行高
}
};
这样你能完全控制字体、行高、颜色、定位，且避开所有浏览器私有渲染路径。唯一代价是得自己处理多语言切换和时间轴对齐——但比起调试一堆静默失败的 track，这反而更快。
最常被忽略的一点：重叠从来不是 track 标签的问题，而是你把它当成了可样式化的 HTML 元素。它不是 div，没有 class，不能加 z-index，也不响应 line-height —— 所有试图用 CSS 修它的尝试，本质上都在对抗浏览器的封闭渲染逻辑。
