ie6–8不支持iframe.contentdocument，须回退至iframe.contentwindow.document或document.frames；firefox中scrollheight为0需重置body样式并优先读documentelement.scrollheight。
IE6–8 下 iframe.contentDocument 为 null 怎么办
IE6–8 不支持 iframe.contentDocument，必须用 iframe.contentWindow.document 或老式 document.frames 回退。直接访问 contentDocument 会返回 null，后续读 scrollHeight 必然报错或得 0。
实操建议：
- 统一用
iframe.contentWindow || iframe.contentWindow.document获取子页 document 对象，兼容 IE6+ 和现代浏览器 - 避免写
iframe.contentDocument.body.scrollHeight—— 在 IE6–8 中这行代码直接崩掉 - 若用
document.frames（仅 IE），需确保 iframe 有name属性，且与 frames 索引匹配 - 兜底高度不能省：
Math.max(height, 300)，防止空内容导致 iframe 塌成一条线
Firefox 下 scrollHeight 读取为 0 的真实原因
Firefox（尤其旧版）对浮动元素和 display 变更敏感：只要子页用了 float、display: inline-block 或未重置 body margin/padding，scrollHeight 就可能返回 0 —— 这不是 bug，是 Firefox 渲染树计算逻辑更严格。
实操建议：
- 子页
必须加重置样式：body { margin: 0; padding: 0; } - 禁用子页内所有
float布局（改用flex或inline-block+vertical-align） - 父页读取时优先用
document.documentElement.scrollHeight，它比body.scrollHeight更稳定（绕过 margin 折叠问题） - 加
setTimeout(() => { /* 读高度 */ }, 0)，把读取推到渲染队列后，避免 CSS 尚未生效就取值
onload 事件在老浏览器中触发太早怎么补救
onload 在 IE6–8 和旧版 Firefox 中只保证 DOM 加载完成，不保证 CSS 渲染、字体加载、图片解码完毕。此时读 scrollHeight 得到的是“未撑开”的高度，常见现象是 iframe 底部被截断，刷新几次才偶然正常。
实操建议：
- 不要依赖单次
onload，必须加延迟读取：setTimeout(() => { /* 读 height */ }, 100)（100ms 是经验值，太短仍可能不准） - 如果子页含 Web Font，且用了
font-display: swap，需额外监听document.fonts.ready（仅支持 Chrome/Edge/Firefox 60+，IE 不支持，所以 fallback 到 setTimeout） - 避免用
setInterval轮询（如每 200ms 查一次），老浏览器性能差，容易卡死；改用一次性延时 + 重试机制（最多试 3 次，间隔递增） - 子页可主动发信号：
window.parent.postMessage('ready', '*')，父页监听后才开始读高度，比盲目延时更精准
Flex 容器里 iframe 死活不撑高怎么办
老浏览器（IE10 以下）根本不支持 Flex，但即使在支持 Flex 的 IE11/Edge Legacy 中，flex-grow: 1 对 iframe 也无效——因为 iframe 是替换元素，不参与内容高度冒泡，且父容器若没显式高度，flex 就无基准可算。
实操建议：
- 彻底放弃在老浏览器中对 iframe 使用
flex-grow，改用传统块级流：height: auto+min-height: 300px+ JS 动态设style.height - 如果必须嵌套在 Flex 容器中，给 iframe 的**直接父容器**设
height: 100%和position: relative，再让 iframe 自身设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 删掉所有
height: 100%写法——在 IE 中它常被解析为 0，且会阻止align-items: stretch生效 - 检查父容器是否设置了
min-height: auto（现代浏览器默认值），老浏览器没有这个概念，但某些 polyfill 会注入，导致高度锁死
老浏览器的 iframe 高度适配，本质是“降级 + 容错 + 主动同步”。靠 CSS 百分比或 Flex 拉伸基本无效，必须用 JS 控制，且每个环节都要有 fallback：document 访问方式要回退、scrollHeight 来源要选对、时机要延后、高度值要有最小保底。最易被忽略的是子页 body 默认 margin —— 它在 Firefox 下会让 scrollHeight 多出 8px，而父页又没做 trim，结果每次高度都偏高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
