视频控件显示异常通常因CSS全局样式重置导致，尤其是对表单元素或伪元素的修改影响了浏览器默认渲染；应避免通配符重置、保护::-webkit-media-controls类私有样式，或改用JavaScript自定义控件以确保兼容性。
HTML 视频控件显示异常，通常是因为浏览器默认样式被自定义 CSS 修改或重置了。当你在页面中插入 <video> 标签并启用 controls 属性时，浏览器会自动渲染一套原生控制栏（播放、音量、进度条等）。但如果这些控件看起来错位、按钮消失、进度条不显示或整体布局混乱，大概率是你的样式表对表单元素或伪元素进行了全局重置。
常见原因：CSS 全局样式影响视频控件
很多项目在初始化 CSS 时会对所有元素应用通用样式重置，例如：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这类规则虽然便于布局统一，但可能意外影响视频控件内部的子元素。更严重的是以下操作：
- 对 input、button 等表单控件设置 display: none 或 visibility: hidden
- 重置了 ::-webkit-media-controls 这类私有伪元素
- 使用 normalize.css 或 reset.css 时未排除媒体组件
解决方案：保护视频控件的默认样式
要修复显示异常，关键是避免对视频内部控件施加不必要的样式覆盖。可以采取以下措施：
立即学习“前端免费学习笔记（深入）”；
- 检查全局 CSS 是否对 input[type=range] 做了样式重置 —— 视频进度条本质是 range 类型输入框
- 不要对未知元素使用过度通配符选择器，尤其是涉及 -webkit- 前缀的伪元素
- 若必须重置表单样式，添加例外规则：
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display {
-webkit-appearance: inherit !important;
all: unset !important;
appearance: inherit;
}
注意：不同浏览器内核（如 Chrome 使用 WebKit）使用的伪元素名称不同，上述代码主要适用于基于 Chromium 的浏览器。
推荐做法：最小化干预 + 自定义控件替代
如果你需要高度定制视频界面，建议关闭原生控件（controls 移除），用 JavaScript 实现自定义播放逻辑，并自行设计 UI 组件。这样可完全避开浏览器兼容性问题。
保留原生控件时，则应避免任何形式的全局样式入侵。确保以下设置：
- 不强制修改 video 标签内的 shadow DOM 结构
- 不对页面所有 button 或 div 设置会影响布局的 transform 或 pointer-events
- 测试多个浏览器（Chrome、Firefox、Safari）下的表现差异
基本上就这些。视频控件看似简单，实则依赖浏览器默认行为，一旦被 CSS 意外干扰就容易失灵。保持轻量样式作用域，能有效防止这类问题。
