iframe默认出现横向滚动条是因内容超宽且未禁用溢出，需在外层div设固定宽度并加overflow-x:hidden，而非直接作用于iframe；内部页面配合body{margin:0;min-width:0}更彻底。
iframe 默认滚动条为什么会出现
当 iframe 内容宽度超过其容器设定宽度，且未显式禁用溢出处理时，浏览器会自动添加横向滚动条（overflow-x: auto 是默认行为）。这不是 bug，而是标准渲染逻辑——尤其在嵌入第三方页面或响应式不完善的后台系统时特别明显。
用 CSS 的 overflow-x: hidden 能直接生效吗
不能直接加在 iframe 标签上。因为 iframe 本身是个替换元素（replaced element），它的滚动行为由内部文档控制，外部容器的 overflow 只作用于该容器自身，对 iframe 内部内容无效。
正确做法是给 iframe 外层套一个 <div> 容器，并对这个容器设置裁剪：
<div style="width: 300px; overflow-x: hidden; overflow-y: hidden;"> <iframe src="page.html" width="100%" height="200"></iframe> </div>
- 必须指定外层
<div>的固定宽度（如300px或max-width），否则overflow-x: hidden无意义 -
width="100%"让iframe撑满容器，但超出部分会被外层div截断 - 如果只隐藏横向滚动条，保留纵向，把
overflow-y改成auto或scroll
iframe 内部页面能配合优化吗
如果能控制 iframe 加载的源页面（比如是你自己的子页面），更彻底的方案是在其内部加一行 CSS：
立即学习“前端免费学习笔记（深入）”；
body { margin: 0; min-width: 0; }
常见诱因是内部页面 body 有默认 margin，或包含未设 max-width 的宽元素（如图片、表格），导致隐式撑宽。补充以下任一也能缓解：
html, body { width: 100%; overflow-x: hidden; }- 对可能溢出的元素加
max-width: 100%; overflow-x: hidden; - 避免使用
white-space: nowrap在宽容器里
移动端 Safari 和旧版 IE 的兼容性注意点
某些 iOS Safari 版本对 overflow-x: hidden 在 iframe 容器上的支持不稳定，可能出现“隐藏失败但无法拖动”的假象；IE11 则要求外层容器必须有 display: block（默认满足）且不能是 inline 元素。
稳妥起见，建议加这两条：
<div style="width: 300px; overflow-x: hidden; -webkit-overflow-scrolling: touch;"> <iframe src="page.html" style="border: none;"></iframe> </div>
-
-webkit-overflow-scrolling: touch能修复 iOS 上的滚动卡顿或截断失效 -
style="border: none"避免默认边框干扰视觉裁剪边界 - 不要依赖
scrolling="no"属性——HTML5 已废弃，Chrome/Firefox 无视它
真正起效的是外层容器的 overflow-x: hidden + 明确宽度 + 内部页面配合，三者缺一不可。最容易被忽略的是：忘了给外层容器设宽度，或者误以为给 iframe 自己加 overflow 就行。
