controls属性仅控制原生媒体控件的显隐，不提供样式定制能力；真正可控方案是弃用controls自行实现ui，或仅做容器级css调整。
controls 属性本身不提供样式控制能力
浏览器原生控件的外观由系统和渲染引擎决定，controls 只是开关——写了就显示默认控件，不写就不显示。你没法用 controls 属性本身改按钮颜色、进度条高度或隐藏音量滑块。所有试图给 controls 加值（比如 controls="minimal"）或用 CSS 强制覆盖伪元素却忽略兼容性限制的做法，都会在 Safari 或旧版 Chrome 中失效。
WebKit 浏览器（Chrome/Safari）的伪元素样式极不稳定
虽然 Chrome 和 Safari 支持类似 audio::-webkit-media-controls-volume-slider 这样的选择器，但它们：
- 不是标准 API，Firefox/Edge 完全不识别
- iOS Safari 中多数伪元素（如时间显示、进度条拖柄）根本不可选、不可样式化
- 即使加了 display: none，也可能导致整个控件布局错乱或功能失灵
- 某些版本中，修改 timeline-container 会直接让播放按钮点击无响应
真正可控的样式方案只有两种路径
- 完全弃用原生 controls：删掉 controls 属性，用 JS 监听 play、pause、timeupdate、loadedmetadata 等事件，自己画 DOM 元素（按钮、<input type="range"> 进度条、<span></span> 时间文本）
- 只做最小必要定制：仅用通用 CSS 调整容器尺寸与对齐，例如：audio { width: 100%; max-width: 400px; }audio:focus { outline: 2px solid #007aff; }
避免触碰任何 ::-webkit- 伪类，除非你明确只支持桌面 Chrome 且接受降级风险
容易被忽略的兼容性断点
- iOS Safari 下，即使你用 JS 把 audio.volume = 0.8 设好，用户点原生音量图标仍可能无法调高——这是系统策略，CSS 和 JS 都绕不过
- Android WebView 中，preload="metadata" 常被忽略，导致首次点击播放按钮后卡顿 1～2 秒，这不是样式问题，但会让自定义 UI 显得“反应迟钝”
- 如果音频资源跨域且服务端没配 Access-Control-Allow-Origin，Safari 会静默失败：控件照常显示，但点击后无任何错误、无事件触发、networkState 停在 0 —— 此时你以为是样式没生效，其实是根本没加载成功
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
