旧浏览器（ie8–ie11）不支持srcset和，会静默忽略，仅渲染末尾兜底；background-position-x在ie7失效，须用合并的background-position；所有兼容方案须以正确doctype为前提。
旧浏览器（尤其是 IE8–IE11）对 HTML 图片相关特性支持极弱，不是“加个兼容库就能跑”，而是得按能力分层替换：srcset 和 <picture></picture> 直接被忽略，background-position-x 在 IE7 失效，连 <img> 的默认行内行为都会撑开父容器。核心思路是——用老办法做老事，别硬套新语法。
IE8–IE11 里 <picture></picture> 和 srcset 完全不生效怎么办
IE11 及以下、Android 4.3 以前的 WebView 会跳过整个 <picture></picture> 结构，只渲染内部最后一个 <img>（如果有），否则空白。这不是加载慢，是解析器压根不认这些标签。
- 永远把兜底
<img src="fallback.jpg">放在<picture></picture>最内层末尾，不能只靠src属性“撑场子” - 不要指望
sizes或srcset在旧环境生效——它们会被静默丢弃；需要响应式图像时，改用 JS 库如picturefill（v3 支持 IE8+） - 如果只用
<img srcset="...">，IE 会退化为加载src，所以务必保留src属性，且指向可用图
background-image 定位比 <img> 更稳，但写法有坑
CSS 背景图的定位能力从 IE6 就已稳定，比 inline 图像更可控，尤其适合图标、装饰图等无需语义化的场景。但它不是万能替代，得避开几个老版本特有陷阱。
- 用
background-position: 20px 10px或background-position: right top，IE7+ 全支持；别拆成background-position-x/background-position-y—— IE8 支持，IE7 不支持 - 避免在 IE8- 中依赖
calc()计算偏移值（如background-position: calc(50% + 10px) top），它完全不识别，可改用固定像素或 JS 动态计算 - 若需响应式偏移，优先用媒体查询覆盖，比绑定
window.resize更轻量，也避开了 IE8- 中getBoundingClientRect()返回null的问题
图片自身渲染 bug：3px 间隙、边框、垂直对齐错乱
IE 低版本对 <img> 的默认行内行为处理异常，导致父容器被撑高、相邻图片间出现空隙、链接包裹时自带蓝边等问题，和语义无关，纯盒模型缺陷。
- 给图片加
display: block或vertical-align: top解决 3px 间隙（本质是行内元素 baseline 对齐引发的下缘留白） - 带
<a></a>的图片在 IE6–IE8 默认有蓝色边框，必须显式写img { border: none; }，仅border: 0有时不生效 - 多个图片横排时出现间隙，除了浮动，也可把 HTML 中的换行符删掉（即所有
<img>写在同一行），让浏览器不把换行当空格处理
JS 动态控制图片位置时，IE8- 的 offsetParent 和事件绑定要重算
在 IE8- 中，offsetTop/offsetLeft 的计算基准是 offsetParent，但如果父元素 position 是 static（默认值），它会一直向上冒泡找最近的非-static 祖先，甚至到 ，结果和现代浏览器差几倍。
- 用
position: relative显式设父容器，确保offsetParent可控；IE6 下若父容器无height或overflow，仍可能“溢出”到视口顶部 - 绑定窗口 resize 事件时，IE8- 不支持
addEventListener，得用attachEvent('onresize', handler)，且注意 this 指向不同 - 获取图片尺寸别用
naturalWidth/naturalHeight（IE9+ 才支持），降级用img.width/img.height或预设宽高属性
最常被忽略的一点：所有兼容性补丁都建立在 DOCTYPE 正确的基础上—— 必须独占第一行、无 BOM、无注释、无空格，否则 IE 直接进怪异模式，上面所有 CSS/JS 都可能失准。验证方式很简单：打开 Chrome DevTools → Elements 面板顶部看渲染模式，显示 “Standards” 才算真正起步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
