隐藏 iframe 边框必须用 css 的 border: none，而非仅依赖已废弃的 frameborder 属性；还需添加 display: block 和 margin: 0 消除基线间隙与默认白边；响应式中需确保父容器有明确高度，避免边框忽隐忽现。
隐藏 iframe 的边框，不能只靠删掉 frameborder 属性或写个 frameborder="0" 就完事。现代浏览器中真正起效的是 CSS 的 border: none，而旧属性只是“辅助压制”，单独使用容易在 Safari、旧 Edge 或响应式场景下漏出 1px 细线或意外闪现边框。
必须用 border: none，不是可选项
HTML5 已废弃 frameborder，它不再参与标准验证，也不保证跨浏览器一致性。即使写了 frameborder="0"，Safari 某些版本仍会渲染 UA 默认的灰色细边；IE/Edge 旧版可能保留 2px 3D 边框感。只有 style="border: none" 能直接覆盖所有浏览器的默认边框样式，语义清晰、效果稳定。
-
border: none比border: 0更推荐——后者在部分重置样式表中可能被覆盖 - 建议内联书写，避免被框架（如 Bootstrap）的全局
iframe样式干扰 - 若必须用外部 CSS，请提高选择器优先级，例如：
iframe[src*="embed"] { border: none; }
别忘了 display: block 和 margin: 0
iframe 默认是行内元素，底部会因基线对齐多出几像素空白，视觉上像“下边框”；同时，某些浏览器（尤其 IE/旧 Edge）会给 iframe 内容区域加默认 marginwidth 和 marginheight，造成白边。这些都会被误认为是边框残留。
- 加上
style="display: block"消除基线间隙 - 显式写
margin: 0清除内容边缘白边，不要依赖已废弃的marginwidth="0" - 完整内联写法示例：
<iframe src="page.html" style="border: none; display: block; margin: 0;"></iframe>
响应式布局中边框“忽隐忽现”的原因和解法
当设置 width="100%" height="100%" 时，iframe 高度常塌陷——因为百分比高度在 iframe 上无效，除非父容器有明确高度（如 height: 600px 或 height: 100vh）。高度塌陷后，渲染引擎可能回退到 UA 默认边框逻辑，导致边框突然出现。
- 解决方法：给父容器设固定或视口单位高度，或改用“padding-bottom + absolute”容器包裹法
- 避免直接在 iframe 标签上写
height="100%"，它在多数场景下不生效 - 检查控制台是否报
Blocked by Permissions Policy类错误，这类安全策略异常也可能间接触发渲染 fallback
配套细节：滚动条与背景透明不能靠旧属性
仅清边框还不够。实际嵌入中，scrolling="no" 和 allowtransparency="true" 都已废弃，继续使用可能失效或引发兼容问题。
- 隐藏滚动条请用
style="overflow: hidden"（注意：会截断溢出内容，非隐藏滚动条本身） - 背景透明需子页面
，且父页 iframe 不设 background - 如需脚本交互，务必加
sandbox="allow-scripts allow-same-origin"（同域必需）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
