IE8–10需用html5shiv-printshiv.min.js并设picture{display:block}修复渲染；WebP加载失败主因是MIME类型不匹配；img的src是关键兜底，必须有效且不可带动态参数。
旧浏览器直接忽略 标签怎么办
IE8–10 完全不解析 <picture> 和 <source>，DOM 里根本没这俩节点，整个标签块被跳过，只渲染内部的 <img>。但这个 <img> 很可能塌陷——因为默认 display: inline，宽高、margin、padding 全失效。
必须分两步补救：
- 引入
html5shiv-printshiv.min.js（不是随便一个 html5shiv，要带 print 支持的版本） - 在
<head>里加 CSS：picture { display: block; }
注意：document.createElement('picture') 单独调用无效，IE8–9 必须走 html5shiv 的完整初始化流程。
为什么写了 却还是加载 JPEG
不是浏览器不支持 WebP，而是链路中某处 MIME 类型没对上。浏览器只认标准 type 字符串，且必须和服务器返回的 Content-Type 响应头完全一致。
立即学习“前端免费学习笔记（深入）”；
-
type="webp"或type="image.webp"→ 静默跳过该<source> - Nginx 没配
types { image/webp webp; }→ 返回text/plain或空 Content-Type - CDN 没透传
Accept: image/webp请求头 → 后端无法判断能力，统一返回 JPEG - DevTools Network 面板看到
blocked:mime-type或406 Not Acceptable→ 基本锁定服务端配置问题
![HTML中picture标签的降级方案]()
的 src 是摆设还是关键兜底
<img> 的 src 不是可有可无的 fallback，它是所有不支持 <picture> 的浏览器（IE、旧 Android WebView）唯一能识别并加载的入口。没有它，整张图就空白。
-
src必须指向真实可访问的 JPEG/PNG 资源，不能是带查询参数的动态地址（如?format=webp） -
src不能是 404 路径，否则整个<picture>退化为仅显示alt文本 -
fetchpriority="high"必须加在<img>上，加在<source>上无效 - 不要给
<img>加srcset或sizes，它只负责兜底，不是响应式主力
移动端裁切失效的常见写法错误
<picture> 本身不裁图，它只是按条件选你提前准备好的裁切图。失效往往出在逻辑顺序或语法细节上。
-
media写在<picture>标签上（如<picture media="(max-width:768px)">）→ 浏览器直接忽略 -
media="(max-width: 768px)"缺少括号 → 写成media="max-width: 768px"就静默失效 -
<source>放在<img>后面 → 浏览器跳过所有<source>，只加载<img src> - 断点重叠（如同时存在
(min-width: 768px)和(max-width: 768px)）→ 768px 行为未定义，不同浏览器表现不一 - 顺序必须从宽到窄：
<source media="(min-width: 1200px)">→<source media="(min-width: 768px)">→<source media="(max-width: 767px)">
真正麻烦的从来不是写几行 HTML，而是保证每张裁切图都精准对应设备视口、尺寸一致、构图一致——否则切换时视觉跳变，用户一眼就能感知。
