最基础兼容的尺寸控制方式是直接用 width 和 height HTML 属性，如 width="800" height="600"，仅设容器大小且不强制缩放内容；需显式指定宽高、声明 type="text/html" 并注意跨域与本地协议限制。
用 width 和 height 属性直接设尺寸
这是最基础也最兼容的方式，object 标签原生支持 width 和 height 两个 HTML 属性，值写数字即可（单位隐含为像素），比如 width="800" height="600"。浏览器会按此渲染显示区域，不依赖 CSS。
注意：这些属性只控制「容器大小」，不强制缩放嵌入的 HTML 内容本身——如果被嵌入的页面内部有固定宽高或溢出逻辑，仍可能显示不全或出现滚动条。
- 值不带单位（
width="100%"是合法的，但部分旧浏览器对百分比支持不稳定） - 若只设
width不设height，多数浏览器会按原始比例推算高度，但不可靠，建议显式指定 - 该方式在 IE9+、Chrome、Firefox、Safari 中均有效，是跨浏览器兜底方案
用 style 内联样式覆盖并增强控制
当需要响应式、等比缩放或精细定位时，style 更可靠。例如：style="width: 100%; height: 500px; border: 1px solid #ccc;"。CSS 的优先级高于 HTML 属性，能覆盖 width/height 值。
常见陷阱是忽略 object 的默认 display 行为：它默认是 inline，可能导致换行错位或 margin 失效。加 display: block 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 用
max-width配合height: auto可防止在小屏上溢出，但对嵌入的 HTML 页面效果有限（因其内部布局独立） - 设
overflow: hidden能裁剪超出区域的内容，但用户无法滚动查看，慎用 - 避免用
transform: scale()缩放整个object，会导致点击坐标偏移、文本模糊
嵌入 HTML 时 type="text/html" 必须显式声明
如果不写 type="text/html"，部分浏览器（尤其是 Safari 和旧版 Edge）会把本地 HTML 文件当二进制资源处理，导致空白或下载提示。这个属性不是可选的“锦上添花”，而是触发正确渲染的关键开关。
同时，data 属性路径必须可访问：相对路径以当前 HTML 所在位置为基准；跨域 URL 则受目标站点 X-Frame-Options 或 Content-Security-Policy 限制，此时 object 会静默失败（无报错，只显示 fallback 内容）。
-
data指向 404 页面时，object会显示 fallback，但不会抛 JS 错误，调试需检查 Network 面板 - 本地文件协议（
file://）下 Chrome 会阻止object加载本地 HTML，属安全策略，非 bug - fallback 内容（
object标签内的 HTML）只有在加载失败时才渲染，务必简洁可用
和 iframe 对比时尺寸行为的差异点
object 渲染 HTML 时没有独立的浏览上下文（browsing context）语义，它更像一个“内容容器”，而 iframe 是完整隔离的文档环境。这意味着：
-
object中的脚本可能与父页面共享部分作用域（尤其在同源且未 sandbox 时），尺寸变化可能意外触发父页面重排 -
object不支持sandbox属性，无法限制脚本执行或表单提交，安全性弱于iframe - 对 CSS
aspect-ratio、contain-intrinsic-size等现代尺寸控制特性支持较差，不要依赖它们做精确比例控制 - 当嵌入内容含
viewportmeta 标签时，object完全无视，而iframe会尊重
实际项目中，只要目标是嵌入 HTML，优先用 iframe；object 更适合 PDF、SVG 或需要 fallback 的轻量场景。尺寸控制本身不难，难的是嵌入后内容是否真按你预期渲染——这取决于被嵌入页面自身的结构和样式。
