embed设width="100%" height="100%"无效的根本原因是height="100%"依赖父容器有明确高度，而embed的html height属性常被css覆盖，且浏览器对type="application/pdf"缺失或错误、跨域未配cors、服务端mime类型不符等均会导致渲染失败。
embed 标签本身不支持真正的“自适应窗口”，它只是按 HTML 属性或 CSS 控制的尺寸渲染，而 PDF 渲染器（如 Chrome 的 PDFium）会自行决定内容缩放逻辑。强行写 width="100%" height="100%" 且父容器无明确高度时，高度大概率塌陷为 0。
为什么embed设width="100%" height="100%"没效果
根本原因是：height="100%" 在 CSS 中依赖父容器有可计算的高度，而 embed 的 HTML height 属性在现代浏览器中常被 CSS 覆盖或忽略；Chrome 优先读取 CSS height，Firefox 可能仍尝试用 HTML 属性但受限于父级 display: flex 或 max-height 干扰；Safari 移动端甚至直接忽略 height 属性。
- 检查 DevTools → Elements 面板，确认
embed元素上是否真实存在height属性（不是 computed 样式里的值） - 父容器必须有明确高度约束，例如
min-height: 500px或height: 80vh - 避免同时写 HTML
width/height和 CSSwidth/height，行为不一致 - 不要嵌套在
<object></object>里“兜底”——Safari 会更激进拦截
embed必须带type="application/pdf"
漏掉或写错这个属性，浏览器就当普通资源处理：Chrome 可能静默失败、Firefox 降级为下载链接、Safari 直接留白。这不是样式问题，是 MIME 类型协商失败。
- 正确写法：
<embed src="doc.pdf" type="application/pdf" width="100%" height="600"></embed> - 禁止写成
type="pdf"、type="application/x-pdf"或干脆省略 - 服务端返回的 Content-Type 必须是
application/pdf，CDN 或代理返回text/plain会导致完全失效 - 跨域 PDF 必须配
Access-Control-Allow-Origin，否则 Network 面板能看到 0 字节响应
用 CSS 容器控制宽高比比直接设height更可靠
PDF 页面有原始尺寸，浏览器不会自动等比缩放内容。width 和 height 绝对值只能固定显示区域，不能保证内容比例。真正可控的做法是用外层容器锁定比例，再让 embed 填满它。
- 现代写法（Chrome/Firefox/Safari 15.4+）：
<div style="aspect-ratio: 4/3; width: 100%; max-width: 800px;"><embed src="a.pdf" type="application/pdf" width="100%" height="100%"></embed></div> - 兼容旧版（如 Safari 12–14）：用
padding-bottomhack，外层position: relative，embed设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须给
embed加style="display: block"，否则可能因 inline 默认行为产生底部空白 - 移动端建议加
min-height: 400px防止过小屏幕撑不开
移动端 Safari 上embed基本不可靠，换方案
macOS 14+ 和 iOS 17+ 的 Safari 已默认禁用第三方 MIME 渲染，embed 显示空白框且控制台无报错是常态。这不是你代码的问题，是策略限制。
- 首选
<iframe src="pdf-url#toolbar=0&view=FitH"></iframe>，它在 Safari 中兼容性远好于embed - 若需更高控制力（比如密码保护、离线支持），部署 Mozilla
pdf.js，用<iframe src="/pdfjs/web/viewer.html?file=xxx.pdf"></iframe> - Google Docs Viewer 是兜底方案，但要求 PDF 公开可访问、URL 绝对路径、文件 ≤ 50MB，且更新后要加时间戳防缓存
- Adobe PDF Embed API 功能强但引入额外 SDK 和网络请求，适合需要协作或埋点的场景
真正卡住的往往不是写法，而是没查 Network 面板确认 PDF 请求是否返回 200 —— 白框九成是 404、CORS 或 MIME 错误，不是 CSS 没调好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
