video::cue样式不生效，先检查track是否真就绪；90%问题源于track未加载成功，需确认track在video内且位于source之后、VTT首行为纯WEBVTT、响应头为text/vtt、kind为subtitles/captions。
video::cue 样式不生效，先检查 track 是否真就绪
90% 的“字幕没变样”问题，根本不是 CSS 写错，而是 track 压根没加载成功——浏览器只对 readyState === 2 的字幕轨道应用 ::cue 规则。
必须确认以下几点：
-
<track></track>必须写在<video></video>标签内部，且严格位于所有<source></source>之后、之前；写在外部或顺序颠倒，会被静默忽略 - VTT 文件首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT，后面跟一个空行 - Network 面板里看 .vtt 请求：状态码 200、响应头
Content-Type: text/vtt、无 CORS 报错 -
kind只能是"subtitles"或"captions"；设成"descriptions"或"chapters"时::cue完全不触发 - iOS Safari 会静默禁用
srclang与系统语言不匹配的轨道——哪怕你写了样式，它也没渲染机会
哪些 CSS 属性在 ::cue 里真正有效
::cue 不是普通 DOM 元素，它是浏览器合成层里的“影子文本”，只接受扁平化、跨浏览器兼容的样式。所有规则作用于整条 cue 块，无法选中单个词或某一行。
真正可用（Chrome / Firefox / Safari 主流版本均支持）的属性包括：
立即学习“前端免费学习笔记（深入）”；
-
color、background-color（注意：background: linear-gradient()在 Safari 中被忽略） -
font-size（推荐用em或rem，固定px在小屏易溢出） -
font-family（中文字体建议 fallback 到"PingFang SC","Microsoft YaHei",sans-serif） -
text-shadow（如1px 1px 2px black，比纯背景更兼容；旧版 Firefox 不支持，需降级为color + background-color） -
padding（避免设过大值，多行字幕会被截断） -
text-align、line-height、white-space（但换行行为实际由 VTT 文件中的\n和line指令控制，CSS 干预能力很弱）
明确无效（写了也白写）的属性：
-
display、margin、border、transform、position、z-index -
width、height、flex相关属性
常见样式失效场景与绕过方式
即使结构和属性都对，仍可能因环境差异导致样式“看起来没生效”：
- Chrome 和 Safari 对
text-shadow支持不一致：Safari 16+ 才完全支持，旧版建议用background-color+color组合模拟遮罩效果 - Firefox 对
font-size: 1.2rem的解析偏小，可加line-height: 1.4补偿视觉密度 - 多行字幕在移动端被截断：不是
padding太大，而是 VTT 中未用line:指令指定垂直位置，::cue无法控制布局，只能靠调整 VTT 时间块拆分逻辑 - 中文标点或 emoji 显示异常：确保 VTT 文件保存为 UTF-8 无 BOM；若仍乱码，可在
<video></video>上加dir="ltr"强制文本方向
动态切换字幕语言时样式为何丢失
用 JS 动态设置 track.mode = "showing" 后，新激活的轨道不会自动继承已声明的 ::cue 样式——这不是 bug，是规范行为：样式只绑定到就绪（readyState === 2）且已插入 DOM 的轨道。
关键操作只有两个：
- 确保所有
<track></track>在页面加载时就存在并正确配置（不能靠 JS append），否则后续调用mode = "showing"时浏览器不触发样式重计算 - 如果必须动态注入，得等 fetch 获取 VTT 文本后，手动创建
TextTrack对象并调用addCue()，再设mode；此时::cue依然生效，但前提是该TextTrack已挂载到video.textTracks列表中
最稳妥的做法：HTML 中一次性声明全部语言的 <track></track>，仅用 JS 控制 mode，不碰 src 或 DOM 结构。
