embed 的 width/height 属性常失效，根本原因是其为 HTML 属性而非 CSS，易被样式覆盖；且依赖 type="application/pdf"、服务端 Content-Type 及跨域头正确配置；推荐用外层容器配合 aspect-ratio 或 padding-bottom 控制比例，避免直接设像素值。
embed 的 width/height 属性为什么经常失效
根本原因是：width 和 height 是 HTML 属性，不是 CSS，它们在现代浏览器中极易被 CSS 覆盖或忽略。Chrome 优先读取 style 中的 width/height，Firefox 可能保留 HTML 属性但受父容器 display: flex 或 max-height 干扰，Safari 移动端甚至直接丢弃 height 属性。
常见错误现象：
-
width="100%" height="100%"写了但 PDF 区域高度为 0 —— 父容器没设明确高度，100%无参照 - 写了
width="800" height="600"却被裁剪或拉伸 —— PDF 渲染器（如 Chrome 的 PDFium）会按内容可读性自动撑高，不严格遵守尺寸 - 同时写了 HTML
height="600"和 CSSheight: 400px—— 行为不一致，Chrome 用后者，Firefox 可能混用，结果不可控
type="application/pdf" 缺失或错误直接导致尺寸控制失效
这不是样式问题，是 MIME 类型协商失败。漏掉 type、写成 type="pdf" 或 type="application/x-pdf"，浏览器就不调用内置 PDF 渲染器，embed 退化为普通资源加载：Chrome 静默失败、Firefox 显示下载链接、Safari 留白 —— 此时你调任何宽高都毫无意义。
必须确保：
立即学习“前端免费学习笔记（深入）”；
-
embed标签显式声明type="application/pdf" - 服务端响应头
Content-Type: application/pdf—— Nginx/Apache 默认常不配，需手动加 - 跨域 PDF 必须返回
Access-Control-Allow-Origin: *，否则 Network 面板能看到 0 字节响应
真正可控的宽高比控制：用容器 + CSS，别硬靠 embed 属性
PDF 页面有原始尺寸，浏览器不会自动等比缩放内容。embed 的 width/height 只控制显示区域大小，不保证内容比例。可靠做法是用外层容器锁定比例，再让 embed 填满它。
推荐写法（现代浏览器）：
<div class="pdf-container" style="aspect-ratio: 4/3; max-width: 800px;"> <embed src="doc.pdf" type="application/pdf" width="100%" height="100%"> </div>
兼容旧版（如 Safari 15.6 以下）可用 padding-bottom hack：
<div class="pdf-container" style="position: relative; width: 100%; max-width: 800px; padding-bottom: 75%;">
<embed src="doc.pdf" type="application/pdf"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</div>
关键点：
- 外层容器必须有明确宽度（如
max-width或width），否则aspect-ratio或padding-bottom无效 -
embed必须设width="100%" height="100%"且父容器不能有overflow: hidden截断内容 - 避免给
embed直接写像素值宽高，它会和容器比例冲突
embed 在 Safari 和移动端基本不可靠，别把它当主力方案
Safari（macOS 14+ / iOS）默认禁用第三方 MIME 类型渲染，即使 src 正确、type 正确、服务端 MIME 正确，页面也大概率留白且控制台无报错。embed 不支持备用内容，无法 fallback 提示或下载链接；iOS 上永远只显示下载按钮，Android Chrome 常跳转系统 PDF 应用。
如果你的用户包含 Safari 或移动端访问者：
- 不要用
embed作为唯一方案 - 优先考虑
iframe+ 同源 PDF（简单、原生支持好） - 需要分页/缩放/自定义 UI？必须上
pdf.js，embed完全做不到 - 调试前先开 DevTools → Network 面板，确认 PDF 请求状态码是
200、Content-Type是application/pdf、响应体是二进制数据 —— 这三者缺一，embed就静默失败
