标签本身不渲染DOM元素，仅声明文本轨道；所谓“字幕重叠”实为多轨道同时激活、样式未约束或误用模拟所致，浏览器默认同一kind下仅允许一个轨道激活。
<track></track> 标签本身不会重叠——它不渲染任何 DOM 元素，只是声明一条文本轨道。你看到的“字幕重叠”，其实是多个 <track></track> 同时激活、或字幕样式未约束导致的视觉堆叠，也可能是你误用 <div> 模拟字幕时没处理好定位。<h3>为什么两个 <code><track></track> 会同时显示
浏览器只允许**同一 kind** 的 <track></track> 中最多一个处于 active 状态。但如果你写了两个 kind="subtitles"，而其中某个未显式设 default 或未用 JS 控制 track.mode，部分浏览器（尤其是旧版 Safari）可能因解析延迟或缓存残留，短暂同时渲染两行字幕。
- 检查 HTML 中是否重复声明了同 kind 轨道：
<track kind="subtitles" src="zh.vtt"><track kind="subtitles" src="en.vtt"></track></track> - 确保仅一个设
default属性：<track kind="subtitles" src="zh.vtt" default></track> - 用 JS 主动控制：在
video加载后遍历video.textTracks，对非目标 track 调用track.mode = "disabled"
<track></track> 字幕位置跑偏、文字挤在一起
WebVTT 文件里没写 line、position、size 等 cue 设置，浏览器就用默认样式渲染：单行、居中、无行高限制，多语言混排或长句换行时极易视觉重叠。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在 .vtt 文件中为每条 cue 显式指定位置，例如：
1<br>00:00:01.000 --> 00:00:04.000 line:90% position:50% size:80%<br>你好，欢迎观看
- 用 CSS 覆盖浏览器默认字幕样式（注意：仅 Chrome/Edge 支持）：
video::cue { font-size: 1.2rem; line-height: 1.6; white-space: pre-line; } - 避免在 cue 文本中手动加
<br>或空格缩进——WebVTT 解析器不识别 HTML 标签
用 <div> 手写字幕层时 z-index 失效<p>这是最常被忽略的坑：<code><video></video> 默认是 position: static，z-index 对它完全无效；而你的 <div class="subtitle-overlay"> 即使设了 <code>z-index: 10，若父容器没触发层叠上下文，它仍可能被视频画面压住。
立即学习“前端免费学习笔记（深入）”；
- 给
<video></video>加position: relative（不是absolute！否则会脱离流、影响布局） - 给字幕
<div> 加 <code>position: absolute; top: 0; left: 0; width: 100%;，并确保其**直接父容器**是<video></video>的包装<div>，且该父容器设了 <code>position: relative - 检查有没有祖先元素用了
transform、opacity: 0.99、filter或will-change——这些都会创建新层叠上下文，把你的字幕框“锁”在局部层级里 - 监听
webkitbeginfullscreen事件，在进入全屏前临时移除手写字幕层，避免冲突 - 测试真机而非模拟器——iOS 的字幕渲染行为与桌面 Chrome 差异极大
移动端 Safari 全屏后字幕消失或错位
iOS Safari 在全屏播放时会接管字幕渲染逻辑，绕过页面 CSS，且强制使用系统字体和位置。此时自定义 ::cue 样式基本失效，手写的 <div> 层则可能被重置定位或隐藏。<ul>
<li>不要依赖全屏时的 CSS 覆盖；改用 WebVTT 内联样式（<code>align: center, line: 80%）更可靠
真正难搞的从来不是“怎么让字幕显示”，而是“怎么让它在所有设备、所有播放状态、所有字幕语言下都稳定不出错”。WebVTT 的 position/line 控制、层叠上下文的隐形陷阱、移动端全屏接管机制——这三处细节漏掉任何一环，都会让字幕在某个用户那里突然重叠、偏移或消失。
