IE8及以下position: absolute偏移因定位上下文判定异常，需父容器设position: relative、统一px单位、加zoom:1触发hasLayout，并慎用img标签。
为什么 position: absolute 在 IE8 及以下会偏移
IE8 及更早版本对 position 的解析和现代浏览器不一致，尤其当父容器没有显式设置 position: relative 时，IE 会向上追溯到最近的“有布局”（hasLayout）元素作为定位上下文，而不是标准的最近 position: relative/absolute/fixed 祖先。这导致图像明明写在某个 div 内，却相对 body 或其他意外容器定位。
修复 IE 低版本图像定位错乱的三步操作
不是加 hack 就完事，得从定位链源头控制：
- 确保图像的**直接父容器**设置了
position: relative（哪怕它本身不需要定位），这是最可靠、兼容性最好的锚点 - 避免依赖
display: inline-block或float的父容器作为定位上下文——IE8 对这些元素是否触发“hasLayout”判断不稳定 - 如果图像用
img标签且设置了vertical-align，需额外加font-size: 0到父容器，否则 IE 会因基线对齐引入不可见间隙，影响top/left计算精度
top 和 left 值在 IE 中为何总是差几个像素
常见于使用百分比或 em 单位时。IE8 不支持 box-sizing: border-box（即使加了前缀也无效），且对 padding/border 是否计入宽高计算逻辑与标准不同。更隐蔽的是：IE8 把 line-height 的继承行为当作定位参考的一部分，尤其当图像被包裹在 p 或 span 里时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
px写死top/left，避免单位混用 - 给图像父容器加
zoom: 1（触发 hasLayout）+*display: inline（IE6/7 hack）来稳定盒模型 - 检查是否无意中给图像设了
margin，IE8 对负 margin 的渲染常与预期不符
用 background-image 替代 img 标签能绕过大部分问题吗
可以，但有条件限制。把图像转为背景后，定位完全由 CSS 控制，不再受 HTML 流、vertical-align 或 IE 对 img 渲染 bug 影响。不过要注意：
- 必须给容器明确宽高，否则 IE8 下背景可能不显示或缩放异常
- 若需响应式缩放，IE8 不支持
background-size: cover，得用filter: progid:DXImageTransform.Microsoft.AlphaImageLoader（仅支持 IE6–IE8，但性能差、不支持伪类） - 语义化丢失，无障碍访问（如屏幕阅读器）无法识别图像内容
真正难搞的不是怎么修，而是 IE8 下某些组合（比如 position: absolute + transform: scale() + 父容器 overflow: hidden）会直接让图像消失——这种场景没通用解法，只能降级回流式布局或 JS 动态重排。
