Question

我遇到的问题是，iframe与iframe以外的网页呈现出不同的格式。这种情况发生在Chrome和Firefox中。我真正需要做的是强制iframe以与常规主页面相同的方式呈现。我处于无法更改iframe内容的情况。

两个例子：

示例1：H1以上的边距

代码（这是整个HTML文件）：

<h1>hello</h1>

<br><br>

<iframe srcdoc="<h1>hello</h1>"></iframe>

截图：

Screenshot 1

问题：

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>

截图：

Screenshot 2

问题：

在iframe中，忽略border-radius参数，因为缺少'px'。在iframe之外它很好。再次，显然我可以在iframe中添加'px'，但不幸的是，这不是一个选项。如何使iframe渲染与主页面相同？

Answer 1

使用iframe中的不同解析器（我猜Quirks模式）渲染父文档。由于srcdoc属性是仅html5属性，因此使用html5解析器呈现iframe。

如果您通过添加<!DOCTYPE html>将父文档定义为html5，则您会注意到父文档还将具有额外的边距和方格。

也许您可以尝试向srcdoc字符串添加另一个doctype以强制浏览器以其他模式呈现它。我无法让它发挥作用，我想它不受支持。

iframe的渲染与常规网页神秘不同？

1 个答案: