ie8–10 完全不解析 和 ，需 html5shiv 解决标签识别并配合 picture { display: block; } 修正渲染，响应式切换必须依赖 picturefill；ie11 原生支持但 srcset 的 w 描述符不全，仍建议启用 picturefill 保底。
IE11 及更早版本根本不认识 <picture></picture> 标签
直接后果是：整个 <picture></picture> 块被忽略，浏览器只渲染 fallback 的 <img>，但连这个 <img> 也可能因父容器未正确触发布局而塌陷或错位。IE8–10 完全不解析 <picture></picture> 和 <source></source>，也不会触发其子元素的 CSS 样式继承。这不是样式问题，是 DOM 解析层面的缺失。
必须用 HTML5 Shiv + 手动补全 display 行为
单纯引入 html5shiv.js（或现代变体如 html5shiv-printshiv.min.js）仅解决语义标签的“可识别性”，即让 IE 能创建 <picture></picture> 元素节点，但默认仍为 display: inline，导致无法设置宽高、margin/padding 失效、浮动异常等问题。
- 在
中加载html5shiv后，必须额外加一段 CSS：picture { display: block; } - 若页面中存在响应式
<source></source>切换逻辑（如media或srcset），IE 仍不会执行切换——html5shiv不提供运行时行为模拟，它只解决标签识别和基本渲染流 - 不要依赖
document.createElement('picture')单独调用：IE8–9 需要html5shiv的完整初始化流程（含 document.write 注入样式），手动 createElement 无效
真正需要响应式图片能力？得配 picturefill 运行时垫片
picturefill 是专为 <picture></picture> 设计的 polyfill，它会主动解析 <source></source> 的 media、srcset、sizes，并根据视口、设备像素比等条件，动态选择并加载最合适的图片资源。它不依赖 html5shiv，但二者常组合使用。
- 推荐用
picturefill@4.3.2（最后兼容 IE9+ 的稳定版），避免 v5+（已放弃 IE 支持） - 加载顺序必须是：
html5shiv→ CSSpicture { display: block; }→picturefill - 如果项目已用
core-js或webp-support等其他 polyfill，注意检查全局HTMLPictureElement是否被污染；重复 patch 可能导致picturefill的onload回调丢失 - IE11 原生支持
<picture></picture>，但对srcset的w描述符支持不全，仍建议启用picturefill保底
替代方案：不引入 polyfill 时的硬降级写法
当构建流程不允许额外 JS、或需极致控制加载时机，可用纯 HTML/CSS 降级。核心思路是：让旧 IE 忽略 <picture></picture> 结构，只认 <img>，同时确保该 <img> 在所有浏览器中尺寸/位置一致。
- 把关键 fallback 图片放在
<img>的src属性（不是data-src），IE 直接加载；现代浏览器则忽略src，优先走<source></source> - 禁止在
<picture></picture>上设width/height，统一由外层容器控制尺寸，避免 IE 渲染错乱 - 慎用
<source type="image/webp"></source>：IE 所有版本都不支持 WebP，且picturefill默认也不处理type切换（需额外配置picturefill.min.js的type检测模块）
真正容易被忽略的是：即使加了 html5shiv 和 picturefill，IE 下 <picture></picture> 内部的 <img> 仍可能触发双倍 margin bug（尤其浮动时），这时必须手动加 display: inline 或 zoom: 1 触发 hasLayout —— 这个细节在多数 polyfill 文档里根本不会提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
