iframe默认灰色边框源自浏览器ua默认样式，非frameborder属性所致；src加载失败、为空或跨域时，safari/ie/chrome等可能fallback渲染约2px灰色实线边框，需同时设border:none和outline:none彻底隐藏。
iframe 默认灰色边框到底从哪来
不是所有浏览器都显示灰色边框，但 Safari（尤其是旧版）、IE、甚至某些 Chrome 版本在 src 加载失败、为空或跨域受限时，会 fallback 渲染一个约 2px 的灰色实线边框——这并非来自 frameborder，而是 UA（用户代理）默认样式。即使你删了 frameborder="0"，它也可能还在。
必须同时写 border: none 和 outline: none
只写 border: none 不够保险，因为部分浏览器（如 Safari）在 iframe 获得焦点（比如用 Tab 键切入）时，会额外加一层 outline，看起来像“闪现”的虚线或实线边框。
-
border: none彻底清空边框的 width/style/color 三要素 -
outline: none防止键盘聚焦时意外出现轮廓线 - 推荐组合写法：
style="border: none; outline: none;" - 如果用外部 CSS，确保选择器优先级足够，比如
iframe[src*="example.com"] { border: none; outline: none; }
别信 height="100%" 能自动撑开 iframe
当 iframe 宽高设为 width="100%" height="100%"，而父容器没有明确高度（比如靠内容撑开），iframe 实际渲染高度可能塌陷 → 浏览器 UA 样式逻辑被触发 → 灰色边框“忽隐忽现”。
- 正确做法：给父容器设
height: 500px或height: 100vh，再让 iframe 继承 - 或者用 CSS Flex/Grid 布局控制尺寸，比内联
height属性更可靠 - 避免仅依赖
height="100%"这种 HTML 属性，它在 iframe 上语义模糊且兼容性差
src 加载失败时的灰色边框怎么防
当 src 为空、404、或跨域拒绝加载，很多浏览器会把 iframe 当作“缺失资源”处理，直接画个灰色框占位——这不是 bug，是 UA 的 fallback 行为。
- 上线前务必检查
src是否可访问、协议是否一致（httpvshttps） - 开发阶段可用
onerror监听：<iframe src="..." onerror="this.style.display='none'"></iframe> - 更稳妥的是服务端兜底：确保嵌入页返回有效 HTML，哪怕是个空白
- 不要指望
sandbox或referrerpolicy能关掉这个灰色边框，它们管安全不管渲染
真正难搞的不是加样式，而是判断边框到底是谁画的：UA？CSS 框架？还是父容器 overflow 剪裁异常？建议打开 DevTools 的 computed styles 面板，逐层看 border 和 outline 的最终值，再动手删。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
