真正无边框必须用 border: none + display: block + 父容器明确高度或容器包裹法，因 frameborder="0" 已废弃且无法覆盖现代浏览器 UA 样式及布局空隙。
iframe 边框不是删一个 frameborder 就能彻底消失的——它只是“看起来没了”，真正无边框必须靠 border: none + 布局修正 + 父容器高度保障。
为什么只写 frameborder="0" 还有边框？
因为 frameborder 是 HTML4 遗留属性，HTML5 已废弃；它只压制旧渲染逻辑里的 2px 3D 边框，但对现代浏览器 UA 样式（比如 Safari 的 1px 灰线）无效。更关键的是：frameborder="0" 不影响 iframe 元素自身的 CSS border，也不管 margin 或基线对齐导致的视觉空隙。
- Chrome、Firefox、Edge 当前仍兼容
frameborder="0"，但只是“向下兼容”，不是标准行为 -
frameborder="no"或frameborder=false在部分旧版 IE 中会 fallback 到默认值"1"，边框意外出现 - 某些 CMS 或富文本编辑器会自动给
iframe补上style="border: 1px solid #ddd;"，直接覆盖掉frameborder效果
border: none 必须显式写，且不能只靠继承
border: none 是唯一能覆盖所有 UA 默认边框样式的可靠方式，包括 Safari 那条顽固细线。它比 border: 0 更语义清晰，也更少被重置样式干扰。
- 内联写法最直接：
<iframe src="page.html" style="border: none;"></iframe> - 若用外部 CSS，请确保选择器优先级足够，例如：
iframe[src*="page.html"] { border: none; } - 在 Bootstrap 等框架中，需检查是否有全局
iframe样式（如border: 1px solid #dee2e6），必要时加!important临时覆盖（不推荐长期用） - 别漏掉
display: block：否则iframe作为行内元素，底部会因基线对齐多出几像素空白，看起来像“下边框”
响应式布局下边框“忽隐忽现”的真实原因
当用 width="100%" height="100%" 时，边框可能在滚动或重绘后突然出现——根本不是样式没生效，而是 height: 100% 在 iframe 上无效，除非父容器有明确高度（如 height: 500px 或 height: 100vh）。
立即学习“前端免费学习笔记（深入）”；
- 父容器靠内容撑开高度 →
iframe高度塌陷 → 渲染引擎 fallback 到 UA 默认边框逻辑 → 边框“闪现” - 正确做法是用容器包裹法：
position: relative+padding-top维持宽高比，再让iframe绝对定位填满 - 示例结构：
<div class="iframe-container"><iframe src="..." style="border: none;"></iframe></div>，配合.iframe-container { position: relative; width: 100%; padding-top: 56.25%; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
容易被忽略的配套问题：滚动条、sandbox、加载策略
清边框只是第一步。实际嵌入时，scrolling="no"（已废弃）、sandbox 权限缺失、Chrome 的第三方 cookie 策略，都会让“无边框”效果被破坏或功能异常。
-
scrolling="no"不再被 HTML5 支持，应改用style="overflow: hidden"，但注意这会截断内容而非隐藏滚动条 - 不加
sandbox可能导致 JS 被禁用；跨域嵌入必须省略allow-same-origin，同域则建议加上 - Chrome 80+ 对 iframe 加载收紧：本地
file://协议下会被安全策略拒绝，必须走http://或https://（可用python3 -m http.server快速起服务） - 控制台若报
Blocked by Permissions Policy，需确认目标页响应头含Permissions-Policy: interest-cohort=()和SameSite=None; Secure
真正无边框不是样式问题，而是渲染逻辑、布局约束和安全策略三者共同作用的结果；最容易卡住的地方，往往不是 border 本身，而是父容器高度缺失、sandbox 权限不足，或本地开发时忘了起 HTTP 服务。
