ie11中video标签不支持aspect-ratio且忽略width/height语义，需用padding-top百分比容器配合绝对定位实现等比缩放，object-fit无效但可用contain防拉伸，poster尺寸须匹配视频比例，preload避免auto，动态插入需预设样式或监听loadedmetadata修正。
IE11 中 <video></video> 标签默认不保持宽高比
IE11 对 HTML5 <video></video> 的 aspect-ratio 完全不支持，且会忽略 width/height 属性的语义（只当初始尺寸用），导致拉伸或裁剪。这不是 bug，是它对响应式视频的实现缺失。
常见现象：设置 width="100%" 后高度塌陷，或强制设 height 导致画面变形；object-fit: cover 在 IE11 中无效（需 polyfill 或绕过）。
- 必须显式控制容器尺寸，不能依赖 video 自身缩放逻辑
- 优先用 CSS 容器包裹，而非直接操作
<video></video>的宽高属性 - 避免在 IE 中使用
aspect-ratio: 16/9或aspect-ratio: 4/3—— 它们被完全忽略
用 padding-top 百分比实现 IE 可用的等比容器
这是最稳定、无需 JS、兼容 IE8+ 的方案：利用子元素 position: absolute 脱离文档流 + 父容器 padding-top 占位来锁定比例。
<div class="video-container">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
<p><style>
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /<em> 16:9 = 9/16 = 0.5625 </em>/
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /<em> IE11 不支持，但至少不拉伸 </em>/
}
</style>注意：object-fit: contain 在 IE11 中无效，但该写法仍可防止溢出；若需居中黑边，可加 background: #000 到容器上。
立即学习“前端免费学习笔记（深入）”；
video 的 poster 和 preload 在 IE 中的行为差异
IE11 加载 poster 图片时可能触发宽高重算，导致短暂比例跳变；preload="metadata" 在部分 IE11 版本中会阻塞首帧渲染，间接影响尺寸稳定。
- 确保
poster图片分辨率与视频原始比例一致（如 1280×720），否则 IE 会按图片原始尺寸撑开容器 - 避免
preload="auto"—— IE 可能提前加载整个视频并卡住布局计算 - 如果用 JS 动态插入
<video></video>，务必在插入前已设置好容器样式，不要等loadedmetadata再调整尺寸
JS 补丁：监听 loadedmetadata 后手动修正 IE 视频尺寸
当必须动态适配不同分辨率视频时，可在 IE 中用 JS 获取原生宽高并反向设置容器比例。
if (navigator.userAgent.indexOf('MSIE ') > 0 || navigator.userAgent.indexOf('Trident/') > 0) {
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', function() {
const ratio = this.videoHeight / this.videoWidth;
const container = this.parentElement;
container.style.paddingTop = (ratio * 100) + '%';
});
}这个补丁只应在必要时启用 —— 多数场景用纯 CSS 容器更可靠；另外，IE 中 videoWidth/videoHeight 在 loadedmetadata 阶段才可用，之前读出来是 0。
真正麻烦的不是怎么调比，而是 IE11 会把 <video></video> 当成 inline 元素处理，哪怕你写了 display: block，它有时仍会吃掉底部空白——记得给容器加 font-size: 0 或 line-height: 0 防止意外间隙。
