在table中嵌入iframe必须用CSS容器控制尺寸:td设position:relative和padding-bottom实现宽高比,iframe设absolute定位填满,且src需含output=html、referrerpolicy="no-referrer"、loading="lazy",否则iOS白屏或X-Frame-Options拒绝加载。

直接在 <table> 里塞 <iframe> 会出布局错乱、高度塌陷、移动端双滚动条等问题——不是不能放,而是必须用 CSS 容器兜住尺寸和行为。
为什么表格里直接写 <iframe width="100%" height="400"> 会失败
表格单元格(<td>)默认按内容撑开,width="100%" 在 table-layout: auto 下无效;height 像素值会被忽略,除非父 <td> 显式设高;iOS Safari 还可能因缺失 referrerpolicy 拒绝加载。
- 删掉
<iframe>上的width和height属性(它们和 table 冲突) - 给
<td>加style="position: relative; padding-bottom: 75%;"(按 4:3 宽高比预留空间) -
<iframe>改为绝对定位:style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" - 必须加
referrerpolicy="no-referrer",否则 iOS 和部分 Chrome 版本白屏 - 加上
loading="lazy",避免表格渲染阻塞地图加载
嵌入代码必须从百度地图「分享→嵌入网页」获取
手拼 URL(比如 https://map.baidu.com/?q=北京)或复制地址栏链接,99% 会触发 Refused to display 'https://map.baidu.com/' in a frame 错误——这是百度服务器返回的 X-Frame-Options: DENY 响应头导致的。
- 打开
map.baidu.com→ 搜索目标地点 → 点右上角「分享」→ 选「嵌入网页」 - 复制出来的
<iframe>的src必须含output=html参数,例如:https://map.baidu.com/...&output=html - 如果 src 里没有
output=html,说明你复制的是分享页链接,不是嵌入代码 - 不要改 src 中的任何参数,尤其是
coord或center,百度对参数签名校验严格
表格中地图容器的最小可行 CSS 结构
别依赖 <td> 自动撑开,要用 padding-bottom + absolute 实现流式宽高比。下面这段是能跑通的最小结构:
立即学习“前端免费学习笔记(深入)”;
<td style="position: relative; padding-bottom: 75%; height: 0;">
<iframe
src="https://map.baidu.com/...&output=html"
referrerpolicy="no-referrer"
loading="lazy"
title="公司位置"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
></iframe>
</td>
-
padding-bottom: 75%对应 4:3 宽高比(600×450),需要其他比例可换算:比如 16:9 是padding-bottom: 56.25% -
height: 0配合padding-bottom才能让容器真正按比例缩放 -
title属性不是可有可无——它让屏幕阅读器知道这是“公司位置”,WCAG 合规必需 - 如果表格用了
table-layout: fixed,需确保该<td>的width有明确值(如width="600"),否则 padding-bottom 失效
最常被跳过的其实是 referrerpolicy 和 output=html ——这两个缺一不可,而且没法靠调试器看出来,只能靠复制源头是否正确来判断。



















