iOS Safari 中 video 底部留白是因默认 inline 渲染及 vertical-align 导致，最简修复为设置 display: block；需配合 object-fit 实现响应式缩放，并注意 autoplay/muted 的 iOS 限制。
video 元素在 iOS Safari 中底部留白问题
iOS Safari 渲染 时，会默认给元素底部添加约 4px 的空白（表现为内容下沉、对齐错位），本质是将 当作行内替换元素（inline-level replaced element）处理，受 vertical-align 默认值影响。
- 该现象在 iPhone / iPad 的 Safari 及所有基于 WebKit 的 WebView（如微信内置浏览器、QQ 浏览器 iOS 版）中普遍存在
- Android Chrome、桌面 Safari 和 Firefox 通常无此问题
- 仅当
未设置display或显式设为inline/inline-block时触发
强制 display: block 是最简修复方案
直接覆盖默认渲染行为，切断行内布局上下文：
video {
display: block;
}
- 无需额外 wrapper、不改变尺寸计算、不影响 poster 或 controls 显示
- 若视频需与其他元素水平排列（如旁边放按钮），改用
display: flex容器 +align-items: flex-start更稳妥 - 避免使用
vertical-align: top/bottom/middle单独修复——在某些 iOS 版本中仍可能残留 1px 偏移
配合 object-fit 和 width/height 的兼容写法
当视频需响应式缩放或裁剪时，object-fit 与 display: block 必须共存，否则 iOS 下可能失效或重叠：
video {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
-
object-fit在 iOS 10+ 支持良好，但旧版需加-webkit-object-fit（iOS 9 及更早） - 若设了固定
height且未配object-fit，iOS 会拉伸画面并加剧底部错位 - 慎用
video { height: 100%; }—— 父容器若无明确高度，iOS Safari 可能渲染为 0 高度
autoplay 和 muted 在 iOS 上的连带影响
虽然和位置下沉无直接关系，但常因修复视频布局而顺带触发：iOS 要求自动播放必须同时满足 muted + autoplay + 用户交互后首次触发（如 touchstart 后再 play()），否则视频黑屏或静音失败，进而让“位置”问题更难排查。
立即学习“前端免费学习笔记（深入）”；
- 检查控制台是否报
NotAllowedError: The request is not allowed by the user agent or the platform in the current context. - 确保 HTML 中有
，且 JS 中调用play()前已设video.muted = true - 不要依赖
canplaythrough事件立即播放——iOS 下该事件可能过早触发，应监听playing或加setTimeout延迟 100ms
真正麻烦的不是留白本身，而是它常和 poster 消失、controls 错位、muted 失效等问题混在一起出现。先砍掉 display: inline 这个根，再逐个验证其他约束条件，比堆 hack 更可靠。
