object标签的width和height属性必须显式设置，否则多数浏览器渲染为0×0或仅显示fallback内容；响应式推荐width="100%" height="500"配合max-width控制，且pdf与svg对尺寸行为处理逻辑不同。
object 标签的 width 和 height 属性必须显式设置
浏览器默认不会为 <object></object> 分配尺寸，不设 width 和 height 时，多数浏览器会渲染成 0×0 或仅显示 fallback 内容。哪怕嵌入的是 PDF、SVG 或 Flash（已淘汰），也必须手动指定像素值或百分比。
常见错误是只写 style="width: 100%" 却漏掉 height，结果容器塌陷——因为百分比高度依赖父容器有明确高度，而 <object></object> 的父元素往往没设 height。
-
width和height作为 HTML 属性（非 CSS）更可靠，尤其对旧版 Safari 和 IE 兼容性更好 - 若需响应式，优先用
width="100%" height="500"（固定高 + 自适应宽），再配合 CSSmax-width控制上限 - 避免只设
height: auto：object 不像 img 那样自动维持宽高比，auto 常导致内容被裁剪或拉伸
嵌入 PDF 时 object 的尺寸行为与 iframe 不同
用 <object data="doc.pdf"></object> 嵌入 PDF，其内部渲染由浏览器 PDF 查看器（如 Chrome 内置 PDFium）控制。此时 width/height 只影响外层容器框，不直接缩放 PDF 页面内容——PDF 仍以原始 DPI 渲染，可能溢出或留白。
对比 <iframe src="doc.pdf"></iframe>：iframe 会把整个 PDF 文档页作为独立页面加载，尺寸控制更稳定，且支持 scrolling="no" 禁用滚动条；而 <object></object> 在部分浏览器中无法禁用内部滚动条，即使设了 style="overflow: hidden" 也无效。
- PDF 场景下，
<object></object>的尺寸建议略大于预期显示区域（如加 20px），预留工具栏空间 - Chrome 中 object 嵌入 PDF 时，若
height小于约 300px，可能触发“下载 PDF”按钮覆盖内容，这是浏览器 UI 行为，无法用 CSS 覆盖 - 不要依赖
<param name="scale" value="page-width">：该参数仅对旧版 Acrobat 插件有效，现代浏览器完全忽略
SVG 嵌入时 object 的尺寸继承规则
当 <object data="icon.svg"></object> 嵌入 SVG，其内部 <svg></svg> 根元素的 viewBox 和 width/height 属性会与外层 <object></object> 的尺寸共同作用。关键点在于：外层 object 的尺寸决定 SVG 的“画布大小”，而 viewBox 决定内容缩放逻辑。
如果 SVG 文件自身带 width="100px" height="100px" 但无 viewBox，那么它会被强制拉伸填满 object 区域；若有 viewBox="0 0 100 100"，则无论 object 多大，SVG 内容都等比缩放。
- 确保 SVG 源文件包含
viewBox，否则响应式失效 - object 的
width/height设为100%时，父容器必须有明确宽度，且高度不能依赖内容撑开（否则 SVG 高度为 0） - 用 CSS 设置
object { max-width: 100%; height: auto; }对 SVG 有效，但对 PDF 无效——这点常被混淆
移动端 Safari 对 object 尺寸的特殊限制
iOS Safari 会强制重设 <object></object> 的最小尺寸，尤其在横屏切换或键盘弹出后。典型现象是：初始加载正常，点击输入框后 object 高度突变为 150px 左右，且无法通过 JS 重设 style.height 恢复。
根本原因是 Safari 对插件类容器（包括 PDF、SVG）做了 viewport 缩放保护，当页面触发 zoom 或软键盘时，会重置 object 的 layout 尺寸。这不是 bug，而是安全策略。
- 绕过方式：改用
<iframe></iframe>替代<object></object>嵌入 PDF/SVG，在 iOS 上尺寸更可控 - 若必须用 object，可在软键盘弹出前用 JS 记录当前
offsetHeight，键盘收起后 setTimeout 重设style.height（延迟 300ms 以上） - 避免在 object 外层套
position: fixed容器——Safari 会彻底丢失尺寸计算能力
object 标签的尺寸控制本质是“外层容器约束 + 内容渲染引擎响应”的组合，不同 MIME 类型（PDF/SVG/Flash）的底层处理逻辑差异极大，不能套用同一套 CSS 思维去调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
