IE8及更早版本不支持position:sticky，且对relative/absolute子元素盒模型计算有偏差；picture/srcset被IE11及以下忽略，需fallback img；background-image定位更稳妥；JS修正时需注意offsetParent和事件绑定差异。
用 position 定位图像时旧浏览器报错或失效
IE8 及更早版本不支持 position: sticky，且对 position: relative/absolute 的子元素盒模型计算有偏差（尤其当父容器未设 height 或 overflow 时）。不是语法写错了，而是渲染引擎根本不识别某些定位行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认目标浏览器范围——如果必须支持 IE7–8，就彻底放弃
sticky和transform配合的定位方案 - 用
position: absolute时，确保父容器有position: relative且非static（IE7+ 支持，但 IE6 会“溢出”到视口顶部） - 避免在 IE8- 中依赖
calc()计算top/left值，它完全不识别，可改用固定像素或 JS 动态计算
HTML5 新增的 picture 和 srcset 在旧浏览器里直接被忽略
IE11 及以下、Android 4.3 以前的 WebView 完全不解析
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远把兜底
src属性撑场子 - 不要指望
srcset+sizes在旧环境生效，它们会被静默丢弃；需要响应式图像时，用 JS 库如picturefill（v3 支持 IE8+） - 若只用
src，所以务必保留src属性
用 background-image + background-position 替代 inline 图像定位更稳妥
CSS 背景图的定位能力在 IE6 就已稳定支持，比 HTML 图像的布局控制更可靠，尤其适合图标、装饰性图像等不需要语义化的场景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把图像转为 CSS 背景后，用
background-position: 20px 10px或background-position: right top精确控制，IE7+ 全支持 - 慎用
background-position-x/background-position-y—— IE8 支持，但 IE7 不支持，需合并写成单个background-position - 若需响应式偏移，可用媒体查询覆盖，比 JS 绑定 resize 更轻量，也避开了旧浏览器中
getBoundingClientRect()的兼容问题
JS 动态修正图像位置时注意 IE 的盒模型和事件差异
在 IE8- 中，offsetTop/offsetLeft 的计算基准是 offsetParent，但若父元素 position 是 static，它可能向上冒泡到 ，导致定位漂移；另外 DOMContentLoaded 不被支持，得用 document.readyState 判断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定位前先检查
el.offsetParent是否符合预期，必要时手动设父容器position: relative - 用
el.getBoundingClientRect()获取位置时，IE9+ 才支持，IE8 必须回退到offsetTop+scrollTop手动累加 - 绑定窗口大小变化用
attachEvent('onresize', fn)而非addEventListener，且记得在 IE 中清除时用detachEvent
真正麻烦的不是“怎么让图像出现在某处”，而是“怎么让不同浏览器对‘某处’的理解一致”。盒模型、坐标系原点、父级定位上下文……这些底层差异不会因为加了 polyfill 就自动对齐。动手前先查 caniuse 上具体属性的支持表，比硬套现代写法省三小时调试时间。
