ie8及更早版本完全不支持background-size，必须用alphaimageloader滤镜替代：先写标准background供现代浏览器使用，再用background:none\9清空ie8的background，最后添加filter并确保src为html相对绝对路径、sizingmethod=scale、容器设position:relative。
background-size 在 IE8 及更早版本中完全不生效，这不是“部分兼容”，而是根本解析不了该属性。直接写 background-size: cover 或 100% 100% 对 IE8 来说等于没写。必须换路径，不能靠前缀或降级 fallback。
IE8 必须用 filter: AlphaImageLoader 替代 background
IE8 唯一能加载并缩放图片的机制是微软私有滤镜 AlphaImageLoader，但它不是设置背景，而是把图片当内嵌元素插入容器——所以行为和 background 本质不同。
常见错误是只写 filter 却忘了给容器加 position: relative，结果图片定位飘走；或者漏掉 sizingMethod='scale'（默认是 image，只显示左上角一小块）。
关键点：
• src 路径是相对于 HTML 文件的 URL，不是 CSS 文件位置
• 容器必须有 position: relative（否则滤镜定位错乱）
• sizingMethod 必须显式设为 'scale'
• 不能和 background 简写混写在同一声明块里（background 会清空前面的 filter）
顺序和 hack 写法必须严格按规则来
IE8 不报错，只是跳过不认识的属性，但现代浏览器会按顺序覆盖。所以安全写法只有一条路径：
• 先写标准 background（供现代浏览器用）
• 再用 background: none 清掉 IE8 的 background（ 是 IE8 及以下专属 hack）
• 最后写 filter（IE8 执行，其他浏览器忽略）
错误示例：background: url(...) no-repeat; background-size: cover; filter: ... —— 这里 IE8 会先渲染 background，再被 filter 覆盖，但因为没清 background，可能双图叠加或错位。
正确顺序示例：
.hero {<br> width: 600px;<br> height: 400px;<br> position: relative;<br> background: url('/img/hero.jpg') no-repeat center center;<br> background-size: cover;<br> background: none\9;<br> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/hero.jpg', sizingMethod='scale');<br>}
polyfill 和 JS 方案的实际限制
像 backgroundsize.min.htc 或 jquery.backgroundcover.js 这类方案确实能模拟 background-size 行为，但它们不是无损替代：
• .htc 文件需服务器返回 Content-Type: text/x-component，Nginx/Apache 默认不配，上线常 404
• 不支持多重背景、background-position 四值语法、background-repeat
• 图片替换或窗口 resize 时可能出现“闪一下”（因 JS 重算尺寸）
• behavior: url(...) 在 HTTPS 页面加载 HTTP 资源会失败（混合内容阻断）
如果项目已用 jQuery 且只针对单背景 + cover 场景，jquery.backgroundcover 可快速落地；否则优先选纯 CSS + filter 路径，更轻量、可控。
绝对定位图片是最可控的兜底方案
当 filter 遇到 PNG 透明、z-index 层叠冲突、或需要精确控制裁剪区域时，filter 就失效了（它不支持 alpha 通道）。这时最稳的方式是放弃背景图思维，改用 <img>：
• 给父容器设 position: relative
• <img> 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;（注意：IE8 不支持 object-fit，得用 JS 或额外 CSS 模拟）
• 实际 IE8 中需配合 width: 100%; height: 100% + top/left + z-index 控制层级
这个方案绕开了所有滤镜和 polyfill 的坑，但意味着 HTML 结构侵入——如果组件化程度高、DOM 不可控，这条路就难推进。
src 路径对不对，position: relative 漏写会导致整张图消失在左上角外，sizingMethod 拼错成 'scaled' 或漏引号也会静默失败。这些地方没有报错提示，只能靠肉眼比对 DOM 渲染结果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
