根本原因是video元素为内联替换元素且未设宽高与对齐方式，叠加poster尺寸差异、加载时机不同及浏览器fallback行为不一，导致父容器高度浮动、flex/Grid换行错位。
视频列表项高度不一致导致换行错位
根本原因是 元素默认为内联替换元素，且未显式设置宽高或对齐方式，加上各视频封面加载时机不同、poster 尺寸各异、浏览器渲染时 fallback 行为差异（比如无 poster 时显示空白黑块），导致父容器（如 div 或 figure）高度浮动，Flex/Grid 布局下换行后对齐失效。
实操建议：
- 统一给每个
的直接父容器设固定高度 +overflow: hidden，例如height: 180px - 用
Object-fit: cover控制自身的缩放行为，避免拉伸变形 - 强制 poster 图片尺寸一致（服务端裁剪或 css 覆盖：给
video::before伪元素设背景图并background-size: cover） - 若用 Flex 布局，加
align-items: flex-start避免默认 stretch 拉伸子项
Grid 布局中 video 列表换行后列宽抖动
常见于用 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 的响应式写法——当某行末尾项因高度突变（如播放控件展开、字幕弹出）撑开容器，Grid track 高度会重算，影响后续行的对齐基准。
关键对策：
立即学习“前端免费学习笔记（深入）”；
- 给 grid 容器设
grid-auto-rows: 200px（值需略大于最大可能高度），锁定每行高度 - 禁用
video的自动高度：显式设height: 100%并确保父容器有明确高度 - 避免在
video上直接监听loadedmetadata后动态改样式，改用 CSS@supports (aspect-ratio)配合aspect-ratio: 16/9固定宽高比（现代浏览器支持良好） - 旧版兼容方案：用 padding-bottom 百分比 hack 替代 height，例如外层
position: relative+ 内层position: absolute; top: 0; left: 0; width: 100%; height: 100%
循环播放列表中 active 项高亮错位
当用 js 动态切换 active class 触发边框/阴影等视觉变化时，若未重置 box-sizing 或忽略 border/padding 对 layout 影响，会导致该卡片宽度微增，挤占相邻位置，整行重新折行。
稳定做法：
- 所有列表项统一设
box-sizing: border-box - 高亮效果优先用
outline（不占布局空间）或transform: scale(1.02)（触发 GPU 加速且不影响文档流） - 避免用
margin增减来实现“突出”，改用z-index+position: relative提升层级 - 若必须用 border，提前预留空间：默认状态设
border: 2px solid transparent，激活时只改 color
移动端 safari 下 poster 加载延迟引发布局跳动
ios Safari 对 poster 属性存在缓存策略缺陷：首次加载常为空白，待视频元数据就绪才渲染，造成高度从 0→实际值突变，触发重排。这不是 bug，是规范允许的降级行为。
绕过路径：
- 服务端预生成统一尺寸 poster（如 320×180），并用
preload="metadata"提前加载 - JS 检测
video.readyState === 0时，用video.style.backgroundImage = url(...)强制占位 - 更彻底：放弃 poster，用 canvas 绘制静态帧（调用
capturestream()不现实，但可在上传时抽帧存为 poster 图） - CSS 层面加
transition: height 0.2s ease-in-out缓解跳动感（仅视觉补救）
对齐问题本质不是视频本身的问题，而是 layout 模型与媒体元素生命周期没对齐。最易被忽略的是：video 在未加载完成时，其 offsetHeight 可能为 0 或异常值，任何依赖它的 JS 计算（比如等比缩放、动态栅格）都会失效。