iframe无法真正无边框，需同时处理css边框、行内元素默认间隙、父容器高度塌陷三件事；仅frameborder="0"或仅border:none均不充分。
iframe 无法真正“无边框”，除非同时处理三件事：CSS 边框、行内元素默认间隙、父容器高度塌陷。单独写 frameborder="0" 或只加 border: none 都会漏掉至少一个坑。
为什么 frameborder="0" 不够用
这个属性在 HTML5 中已废弃，浏览器只是兼容性保留——它只压制旧渲染引擎里的 2px 3D 框架边框，但对现代 UA 样式（比如 Safari 渲染的 1px 灰色细线）完全无效。更关键的是：frameborder 不控制 iframe 元素自身的 CSS border，也不影响 margin 或基线对齐导致的视觉空隙。
常见错误现象：
- 写了
frameborder="0"，Safari 里仍有一条细线 - Chrome 看着没边框，Edge 里底部多出几像素空白
- 响应式缩放时边框“闪现”一次又消失
border: none 必须显式写，且要配 display: block
border: none 是唯一能覆盖所有浏览器默认边框样式的可靠方式，语义比 border: 0 更清晰。但它必须和 display: block 组合使用，否则 iframe 作为行内元素，会因基线对齐在底部留下约 4px 空白，视觉上像“下边框”。
实操建议：
- 永远用内联样式：
style="border: none; display: block;" - 不要依赖 class 继承，UA 样式优先级高，容易被覆盖失败
- 如果父容器是
flex或grid，额外加align-self: start;防止垂直居中带来的错位
响应式场景下边框“忽隐忽现”的真实原因
这不是 bug，是渲染逻辑切换：当 height="100%" 生效失败（比如父容器没设明确高度），iframe 高度塌陷 → 浏览器回退到 UA 默认尺寸（300×150）→ 同时触发 UA 默认边框样式 → 边框就“回来”了。
解决路径很窄，只有两条可行：
- 给直接父容器设固定高度，如
height: 500px或height: 100vh - 改用容器包裹法：父容器
position: relative+padding-bottom: 56.25%（16:9），子iframe设position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block;
注意：两种方案都必须确保父容器和 iframe 都带 border: none，缺一不可。
别让 scrolling、marginwidth 这些废弃属性反向暴露边框感
scrolling="no"、marginwidth="0"、allowtransparency="true" 全部在 HTML5 中废弃。它们不仅无效，还会干扰现代样式解析：
-
scrolling="no"会被忽略，但某些旧版 IE 会强制截断内容，造成右侧/底部被切，看起来像“右边框” -
marginwidth="0"在新浏览器中不生效，IE/旧 Edge 里却仍起作用，导致跨浏览器白边不一致 - 透明背景必须靠子页面自身设
，而不是靠父页iframe的废弃属性
真正该用的替代项只有：overflow: hidden（加在父容器上，慎用，会截内容）、margin: 0（加在 iframe 上）、以及确保子页面 无背景色。
最常被忽略的一点：iframe 的 title 属性不是可选项，而是可访问性刚需。没它，屏幕阅读器无法识别嵌入内容用途——这和“无边框”无关，但一旦上线就被 WCAG 审计卡住，得返工。
