IE8–10完全不解析<picture>和<source>，必须用html5shiv解决标签识别并配picture{display:block}修正渲染，响应式切换需picturefill；IE11原生支持但w描述符不全，仍建议启用picturefill保底。
IE8–10 完全不识别 ，必须用 html5shiv + display:block
IE8–10 根本不解析 picture 和 source 标签，DOM 中连节点都不会创建，更别说执行响应式逻辑。只靠引入 html5shiv.js 不够——它只解决标签“能被创建”，但默认 picture 是 display: inline，导致宽高、margin、padding 全部失效，图片常塌陷或错位。
必须同步加 CSS：
picture { display: block; }
注意：document.createElement('picture') 在 IE8–9 中手动调用无效，必须走 html5shiv 的完整初始化流程（含 document.write 注入样式）。
IE11 原生支持但 w 描述符不全，仍建议配 picturefill
IE11 能解析 picture 和 source，也能按 media 匹配并加载资源，但对 srcset 中的 w 描述符支持不完整（比如不识别 sizes 计算逻辑）。结果就是：你写了 srcset="a-400w.jpg 400w, a-800w.jpg 800w" + sizes="50vw"，IE11 很可能直接忽略 w，退化为只加载第一个。
立即学习“前端免费学习笔记（深入）”；
- 推荐使用
picturefill@4.3.2（最后兼容 IE9+ 的稳定版），不要用 v5+（已放弃 IE 支持） - 加载顺序必须是：
html5shiv→picture { display: block; }→picturefill - 若项目已用
core-js或其他 polyfill，检查全局HTMLPictureElement是否被重复 patch，否则picturefill的onload回调可能丢失
Chrome/Firefox/Safari 现代浏览器里 被忽略的常见原因
不是浏览器不支持，而是条件没写对，导致所有 source 都被跳过，静默回退到 img。典型问题包括：
-
media缺括号：写成media="max-width: 768px"❌，必须是media="(max-width: 768px)"✅ - 断点重叠：比如
(max-width: 768px)和(min-width: 768px)在恰好 768px 时行为不可控，应改用max-width: 767px→min-width: 768px -
type不匹配：写type="image/webp"，但服务器返回的Content-Type是text/plain或image/jpg，Network 面板会显示blocked:mime-type - 漏掉
img的src：没有src属性，整个picture渲染为空白，不会报错
不引入 JS polyfill 时的硬降级写法
当构建流程禁止额外 JS 或需极致控制加载时机，可用纯 HTML/CSS 保底。核心原则是：让旧 IE 忽略 picture 结构，只认 img，同时确保该 img 在所有浏览器中尺寸/位置一致。
关键操作：
- 把最关键的 fallback 图放在
img的src属性（不是data-src），IE 直接加载；现代浏览器则优先走source，忽略src - 所有
source的srcset只写路径，不带x或w描述符（避免部分老浏览器解析异常） - 用 CSS 强制统一
img尺寸，例如：img { width: 100%; height: auto; display: block; }，防止 IE 中因display: inline导致的换行间隙
真正容易被忽略的是：即使写了完整的 picture，只要有一个 source 的 media 语法错、type 不匹配、或服务器 MIME 不对，浏览器就立刻跳过全部，直奔 img src——它不会警告，也不会尝试下一个。
