【发布时间】：2014-11-01 17:04:22
【问题描述】：
我遇到了一个问题，即 iframe 与 iframe 外部页面的呈现方式不同。这发生在 Chrome 和 Firefox 中。我真正需要做的是强制 iframe 以与常规主页相同的方式呈现。我处于无法更改 iframe 内的内容的情况。
两个例子：
示例 1：高于 H1s 的边距
代码（这是整个 HTML 文件）：
<h1>hello</h1>
<br><br>
<iframe srcdoc="<h1>hello</h1>"></iframe>
截图：
问题：
iframe 中 H1 上方的边距过多。我需要让它们匹配。具体来说，我需要 iframe 中的 h1 进行匹配。而且，这不可能是针对这种特定情况的特定 CSS hack。我知道在这里我可以修改 iframe 代码以使用 CSS 破解它。但是为什么它的渲染不一样呢？
示例 2：css 中缺少“px”规范
代码（这是整个 HTML 文件）：
<div style='border:1px solid black;width:30px;height:30px;border-radius:30'></div>
<br><br>
<iframe srcdoc="<div style='border:1px solid black;width:30px;height:30px;border-radius:30'></div>"></iframe>
截图：
问题：
在 iframe 中，border-radius 参数被忽略，因为缺少 'px'。在 iframe 之外它很好。同样，显然我可以在 iframe 中添加“px”，但不幸的是，这不是一个选项。如何使 iframe 以与主页相同的方式呈现？
【问题讨论】：
标签： html css google-chrome dom browser