data 和 type 必须配对使用，缺一不可：data 指向资源 URL，type 声明 MIME 类型，共同触发加载；单独使用任一属性将导致静默失败或空白渲染。
data 和 type 必须配对使用，缺一不可
data 指向资源 URL，type 告诉浏览器“这玩意儿是什么类型”，两者共同触发加载逻辑。只写 data 不写 type，Chrome 可能静默失败；只写 type 不写 data，会渲染一个空白区域——因为没数据可加载。
常见错误现象：PDF 显示为空白，但控制台无报错。检查响应头是否为 application/pdf，若服务端返回 text/plain，即使写了 type="application/pdf"，浏览器也会拒绝加载（尤其启用了 typemustmatch 时）。
-
data支持相对路径、绝对 URL，但file://协议下多数浏览器禁用加载（Firefox 尤其严格），开发时务必用http://localhost启服务预览 -
type必须是标准 MIME 类型，如application/pdf、image/svg+xml、text/html；写成pdf或svg会被忽略 - 嵌入 SVG 时，
type="image/svg+xml"+data="chart.svg"是安全组合；若data指向 PNG 文件却配了 SVG 的 type，必然 fallback
width/height 影响渲染行为，不只是尺寸
width 和 height 不仅控制大小，还参与浏览器的“是否启用内置查看器”决策。Safari 16+ 加载 PDF 时，若未显式设置这两个属性，可能直接跳过内建 PDF 查看器，降级为下载链接。
对 SVG 而言，设 width="100%" height="100%" 比固定像素更合理：它让 viewBox 缩放逻辑生效，避免拉伸变形；但父容器必须有明确宽度（比如 div { width: 800px; }），否则 100% 会塌陷为 0。
立即学习“前端免费学习笔记（深入）”；
- 不设
width/height时，部分浏览器按内容原始尺寸渲染（如 PDF 第一页默认 612×792 pt），可能溢出容器 -
width="100%"在 flex 或 grid 容器中表现稳定；但width="100vw"可能因滚动条宽度导致水平溢出 - 嵌入
text/html（如 iframe 替代方案）时，高度设太小会导致内部页面被截断，且无法滚动——需配合 CSSoverflow: auto或 JS 动态调整
fallback 内容只在明确失败时触发，不是“没显示就出来”
-
data返回 404 / 403 / CORS 错误 -
type与响应头Content-Type不匹配，且声明了typemustmatch - 浏览器完全不支持该 MIME 类型（如旧版 IE 加载
application/pdf）
容易踩的坑：把 fallback 写成纯文本（如 Download PDF）或空格，它不会被渲染；必须是有效 HTML 子节点，比如 <p>、<img>、嵌套的另一个 <object>。另外，<script> 标签在 fallback 区域里不会执行。
typemustmatch 是隐形开关，开或关决定兼容策略
typemustmatch 是布尔属性，不写即为 false；显式写上（typemustmatch 或 typemustmatch=""）即为 true。开启后，浏览器会严格校验响应头 Content-Type 是否与 type 属性一致，不一致则强制 fallback。
这个属性在 PDF 场景最敏感：本地开发时，某些静态服务器（如 Python http.server）默认返回 text/plain，哪怕你写了 type="application/pdf"，开启 typemustmatch 就直接 fallback。生产环境建议关掉它，靠服务端正确配置响应头更可靠。
- 不加
typemustmatch：浏览器尝试按type解析，失败再 fallback，兼容性更好 - 加了
typemustmatch：适合强类型校验场景，比如企业内网中确保只加载可信 PDF，防止 MIME 类型混淆攻击 - 注意：该属性对
text/html嵌入无效——浏览器始终按 HTML 解析，不校验响应头
typemustmatch 的联动；而 SVG 的交互隔离、text/html 的滚动限制，往往要等上线后才暴露。别指望一次写对，得用 Network 面板看真实响应头，再对着 fallback 内容反推问题在哪。 
