ie8–ie10 中 background-position 百分比按背景图自身尺寸计算，导致 50% 50% 居中失效；应优先使用 center center 关键字或 calc() + 像素值兼容。
background-position 百分比在 IE8–IE10 中的计算逻辑不同
IE8–IE10 把 background-position: 50% 50% 解释为“背景图中心对齐到容器中心”，但实际是按“背景图左上角偏移其自身宽高的 50% + 容器左上角偏移其宽高的 50%”叠加计算，结果和现代浏览器不一致——尤其当背景图尺寸 ≠ 容器尺寸时，视觉错位明显。
- 典型现象：
background-position: 50% 50%在 Chrome/Firefox 中居中，在 IE9 下明显偏右下 - 根本原因：IE 旧内核把百分比当作“背景图自身的比例偏移”，而标准行为是“相对于容器尺寸、按背景图锚点反向推算”
- 兼容写法优先用固定单位替代百分比，例如
background-position: center center（IE8+ 支持）比50% 50%更稳 - 若必须用百分比且需精确控制（如雪碧图定位），改用
background-position: -24px 16px这类明确像素值，避开解释歧义
用 background-position: center 替代 50% 是最简修复
center 关键字在 IE8+、Edge 12+、所有现代浏览器中语义统一，等价于“让背景图的中心点对齐容器中心”，不依赖背景图尺寸，也不触发旧内核的百分比重算逻辑。
- 支持情况：
background-position: center（单值）IE8+ OK；background-position: center center（双值）IE8+ OK；background-position: left 20px top 10px（混合关键字+长度）IE9+ 才支持 - 注意：
center只能用于水平或垂直方向之一，双方向都居中必须写两个center，不能省略 - 不要混用：
background-position: center 50%在 IE9–10 中可能退化为仅水平居中，垂直仍走错误百分比逻辑
需要像素级偏移时，用 calc() 配合固定单位绕过百分比
当设计稿要求“背景图右边缘距离容器右边缘 12px”，写 background-position: right 12px 最直观，但 IE8 不支持 right 关键字；此时用 calc() 是折中方案，前提是项目已引入 CSS 预处理器或可接受 IE9+ 降级。
-
background-position: calc(100% - 12px) center在 IE9+、Chrome、Firefox 中表现一致，IE8 忽略整条声明（需兜底） - 兜底写法要前置：先写 IE8 友好的像素值，再覆盖 calc 版本，CSS 会自然覆盖
- 示例顺序：
background-position: 999px center;<br>background-position: calc(100% - 12px) center;
——IE8 读第一行，现代浏览器读第二行 -
calc()内不允许空格缺失：calc(100%-12px)在部分旧版 Safari 中失效，必须保留空格
背景图尺寸变化时，百分比定位的错位会放大
当通过 background-size: contain 或 cover 动态缩放背景图，再用 50% 50% 定位，IE 旧内核会基于缩放后的图尺寸重新算百分比，而容器尺寸不变，导致锚点漂移。这种组合在旧浏览器里基本不可控。
- 规避方式：禁用
background-size的响应式值，改用固定尺寸（如background-size: 200px 150px），再配固定background-position - 若必须响应式缩放，放弃百分比定位，改用
background-position: center+background-repeat: no-repeat，靠关键字对齐逻辑更鲁棒 - 调试技巧：在 IE 开发者工具中临时删掉
background-size，看定位是否恢复正常——如果恢复了，基本可锁定是缩放与百分比联用引发的问题
事情说清了就结束。百分比定位本身没问题，问题出在“谁的百分比”——旧内核认的是图，新标准认的是容器。盯住这个差异点，比死记兼容表管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
