IE全系不支持object-position和object-fit，属性被解析器直接忽略；降级需用background-image+background-position，并确保容器有宽高或触发hasLayout。
IE 完全不支持 object-position，不是偏差，是彻底无效
这不是“位移偏差”，而是属性根本没被解析。IE6–11 全系不识别 object-position 和 object-fit，连 CSS 解析器都会跳过它们，控制台也不会报错。你看到的“图片还在原位”，其实是浏览器按默认行为（object-fit: fill）拉伸渲染的结果，和 object-position 毫无关系。
用 background-image + background-position 替代的实操要点
这是目前最可靠、兼容性最好的降级方案，但要注意几个关键差异点：
- 必须把
<img>换成带背景图的块级元素（如<div>），否则无法设置background-position -
background-size: cover对应object-fit: cover，但它的定位基准是背景图层，不是内容流 -
background-position值语法一致（如20% 30%、right bottom），但语义上是“让背景图的某点对齐容器某点” - 必须显式设置容器宽高或
aspect-ratio，否则背景图可能不显示或比例错乱 - 丢失
alt文本、无法懒加载、SEO 不友好——如果这些是硬需求，就得加 JS fallback 或服务端适配
IE 中容易踩的坑：父容器触发 hasLayout 才能撑开背景
在 IE6–8 里，即使写了 background-image，如果父容器没触发 hasLayout，背景图可能不渲染或尺寸异常。常见表现是容器高度塌陷、背景只显示左上角一小块。
- 给容器加
zoom: 1是最轻量的触发方式（IE 专属 hack） - 更通用的做法是加
min-height: 1px或height: 1%;（注意 IE7–8 对%高度依赖父容器有明确高度） - 避免用
overflow: hidden强制裁剪——IE 可能因此截掉整个背景图 - 如果容器是
display: table-cell，IE7–8 会完全失效，必须改回block或inline-block
移动端调试时别忽略 transform 对 background 的干扰
虽然这是 IE 问题，但很多项目同时要兼容旧 IE 和老版 WebView。如果你在降级方案里加了 transform: scale(1) 或 will-change: transform 来修复 Safari 的 object-position 漂移，那在 IE 下反而可能让背景图定位错乱——因为 IE 不支持这些属性，但某些 polyfill 或重置样式会意外触发渲染层切换。
立即学习“前端免费学习笔记（深入）”；
- 在 IE 条件注释或
@supports not (object-fit: cover)里隔离背景方案，避免混用 - 测试时禁用所有
transform相关规则，确认背景定位是否回归正常 - 真机调试比模拟器更可靠：iOS Safari 9.3 和 Android 4.4 WebView 对 background 定位的处理也存在细微差异
