根本原因是table-cell忽略height:100%且不继承父高，导致iframe高度塌陷为默认300×150px；须显式设像素宽高（如height="450"）、td加vertical-align:top和padding:0、禁用border-collapse，并用静态fallback兜底白屏。
iframe嵌入后高度塌陷、只显示一条细线怎么办根本原因是
单元格默认不继承高度，height="100%"在里等于0。浏览器给iframe的默认尺寸是300×150px，一旦内容超出就直接被截断。
- 必须显式写
width和height——推荐像素值，比如height="450"，别用百分比
<td>加<code>style="vertical-align: top; padding: 0;"，否则默认垂直居中会把iframe往下压出空白- 如果表格用了
border-collapse: collapse，会导致边框重叠遮挡iframe边缘，改用style="border-spacing: 0;"或直接移除该声明
- 避免在
<td>上设<code>overflow: hidden，它会裁掉iframe滚动区域，尤其影响地图类插件操作地图/视频类iframe在表格里点不动、滚不了的常见原因
不是代码写错了，而是CSS或响应头在背后“拦路”。移动端Safari和旧版Chrome对此特别敏感。
- 检查
<table>或<code><td>是否带<code>transform、will-change或overflow: hidden——这些会创建新层叠上下文，让iframe内部事件失焦 - 全局
* { box-sizing: border-box; }会覆盖第三方页面自带的box-sizing: content-box，导致布局错位；给<td>单独加<code>style="box-sizing: content-box;"可修复 - 服务端返回的响应头含
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'时，前端完全无法绕过，Network面板里一眼就能确认
- 移动端Safari忽略
scrolling="no"，真要禁滚动，得用JS监听touchmove并preventDefault()，且绑定对象必须是iframe.contentDocument（仅同源）
国内容器部署时iframe白屏，怎么加fallback才真正生效
GFW拦截导致Google Maps、YouTube等资源不可达，JS动态插入fallback内容来不及执行——用户看到的就是一片白。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
- fallback必须写死在HTML里，放在
<td>内部，例如：<code><td>
<iframe src="..."></iframe><p>地图加载失败，请检查网络或稍后重试</p>
</td> - 不要用
display: none隐藏fallback再靠JS切换，网络失败时JS很可能没机会运行
- 若需样式控制，给fallback文字加
style="color: #999; font-size: 14px;"，但别依赖CSS选择器去控制显隐
- 同源场景下可监听
iframe.onload和iframe.onerror做二次提示，但首次白屏体验仍由静态fallback兜底
table-layout: fixed导致iframe宽度塌陷怎么救
当表格设了table-layout: fixed，所有<td>宽度由<code><col>或首行<td>决定，<code>iframe的width="100%"会失效，缩成一条竖线。
- 确保
<col>有明确width，例如<col style="width: 600px">，或者给首行对应<td>写<code>style="width: 600px" -
iframe本身加style="width: 100%; height: 450px; border: 0;"，border: 0替代已废弃的frameborder="0"
- 别指望
min-width或flex在table-cell里起作用——display行为不支持
- 如果列宽不确定，宁可不用
table-layout: fixed，改用auto布局，靠内容撑开更可靠
实际嵌入时最易被忽略的是：表格单元格对iframe的尺寸约束是硬性的，它不像div那样能随子元素自然伸展；任何想靠CSS“自动适配”的尝试，在跨域或GFW环境下都会失效，固定尺寸+静态fallback才是生产环境的底线配置。
根本原因是
里等于0。浏览器给iframe的默认尺寸是300×150px，一旦内容超出就直接被截断。
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
